0

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

我到处搜索，但我发现的只是这段代码，只有一个选定的状态。

这是我的代码：

<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>
4

1 回答 1

0

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

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/

于 2013-04-01T07:44:41.603 回答