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

时间:2013-07-17 11:12:23

标签: javascript html css

我知道当你点击链接时有一个活动元素。无论如何都要将活动状态传递到下一页。

无论如何都要通过javascript来实现它,因此它会删除一个活动状态并将活动状态添加到下一个链接。所以如果有人可以帮助我的话,我对活动状态有一些问题。

这是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;
}

这是一个JS小提琴:

http://jsfiddle.net/dDcXC/

1 个答案:

答案 0 :(得分:0)

您可以从document.URL获取网址,就像迭代所有链接一样简单 比较他们的href 您可以尝试以下方式:

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"; 
 }
}