具有不同颜色的Javascript活动状态

Question

我想为选中的状态制作一个具有三种不同颜色的导航菜单-每个菜单项一种。

我到处都找过了，但我只找到了这个代码，只有一个被选中的状态。

这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
 .one{
   background-color:none;
   color:black;
}
  .one_active a {
      color:red;
}
  .two_active a {
      color:yellow;
}
  .three_active a {
      color:#e3e3e3;
}

</style>
<script type="text/javascript">
    var divSelected = null;
    function SelectOrUnSelect(a) {
        if (divSelected != null) divSelected.className = 'one';
        divSelected = document.getElementById(a);
        document.getElementById(a).className = 'one_active';
    }   
</script>

</head>
<body>
 <ul>
  <li class="one" id="t1"><a href="#1" onclick="SelectOrUnSelect('t1')">one</a></li>
  <li class="two" id="t2"><a href="#2" onclick="SelectOrUnSelect('t2')">two</a></li>
  <li class="three" id="t3"><a href="#3" onclick="SelectOrUnSelect('t3')">three</a></li>

 </ul>
</body>
</html>

Answer 1

这可能是您想要的，请参阅演示。

var items = document.getElementsByTagName('li');

for(var i = 0;i < items.length;i++){
    items[i].onclick = function(){
        var siblings = this.parentNode.childNodes;
        for(var j = 0;j < siblings.length;j++){
            if(siblings[j].selected){
                siblings[j].className =  siblings[j].className.replace('_active', '');
                siblings[j].selected = false;
            }
        }
        this.className = this.className + '_active';
        this.selected = true;
    }
}

演示：http://jsfiddle.net/louisbros/H4zwj/