Javascript活动状态用不同的颜色表示

Javascript active state with different colors

本文关键字：颜色 表示 活动状态 Javascript      更新时间：2023-09-26

我想用三种不同的颜色来表示选中的状态，每个菜单项一种。

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

这是我的代码:

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

这可能是你想要的，看看演示。

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/

相关文章：