单击链接时如何保持活动状态

Question

I know an active element is when you click the link. Is there anyway to carry the active state across to the next page.

Is there anyway to do it via javascript so it removes an active state and adds the active state to the next link. So i'm having a bit of problems with the active state, if anyone can help me out.

Here is the HTML

<ul class="list-type">
<li class="active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>

CSS

ul.list-type {
list-style-type: none;
padding: 0;
margin-left: 0;
text-align: left;
font-size: 16px;

}
ul.list-type li {
padding: 10px 25px 10px 25px;
}
ul.list-type li a {
color: #000;
}
ul.list-type li a:active {
color: #F00;
}
ul.list-type li a:hover {
color: #CCC;
}

Here is a JS Fiddle:

http://jsfiddle.net/dDcXC/

Answer 1

You can get the URL from document.URL from there it's as simple as iterating all links and comparing their href You can try something like:

var links = document.getElementsByTagName('a');
for (var i= 0 ; i<links.length ; i++){
 if(links[i].href == document.URL){
    var currentClass = links[i].className;
    links[i].className = currentClass + " active"; 
 }
}