Preserving color on breadcrumb item click

问题:

I have a working demo of breadcrumbs here in this JSFIDDLE

Below is the code

HTML

<div id="crumbs">     <ul>         <li><a href="#1">One</a></li>         <li><a href="#2">Two</a></li>     </ul> </div> 

CSS

#crumbs ul li {     display: inline; }  #crumbs ul li a {     display: block;     float: left;     height: 50px;     background: #3498db;     text-align: center;     padding: 30px 40px 0;     position: relative;     margin: 0 10px 0 0;     font-size: 20px;     text-decoration: none;     color: #fff;     padding: 30px 40px 0 80px; }  #crumbs ul li a:after {     content: "";     border-top: 40px solid rgba(0,0,0,0);     border-bottom: 40px solid rgba(0,0,0,0);     border-left: 40px solid #3498DB;     position: absolute;     right: -40px;     top: 0;     z-index: 1; }  #crumbs ul li a:before {     content: "";     border-top: 40px solid rgba(0,0,0,0);     border-bottom: 40px solid rgba(0,0,0,0);     border-left: 40px solid #fff;     position: absolute;     left: 0;     top: 0; }  #crumbs ul li a:hover {     background: #fa5ba5; }  #crumbs ul li a:hover:after {     border-left-color: #fa5ba5; } 

Css has pink color for mouse hover but what i actually want to do is to preserve that color once any item on breadcrumbs is clicked ie: the pink color should remain after a click which can act as a signal to user as of which tab in breadcrumb is currently active.

I have tried using :active in css but it does not preserve the color on breadcrumbs after click.

Any help ?

回答1:

You have to use :visited selector. Something like this will work well :

#crumbs ul li a:visited {   background-color: #fa5ba5; }  #crumbs ul li a:visited:after {     border-left-color: #fa5ba5; } 

And the JS Fiddle : Demo

EDIT (Full JS method):

You can find the full JS demo in the JSFiddle here. In onclick event, there is a loop which remove class .onclick from previous active link.

Code provided must be improved, it's just to show you it can work.

I highly recommend you to use a library like jQuery, because DOM manipulation in native JS code is very boring.

To show you the difference, with jQuery you would have to do this :

HTML Code :

<div id="crumbs">     <ul>         <li><a class="link" href="#1">One</a></li>         <li><a class="link" href="#2">Two</a></li>     </ul> </div> 

JS Code :

$('.link').on('click', function() {        $('.onclick').removeClass('onclick'); // Remove class from previous active link     $(this).addClass('onclick'); // Add class to new active link  }); 

文章来源: Preserving color on breadcrumb item click