多栏目显示隐藏

      <div id="hei">
          <li class="m1" style="color: #fff;" onclick="bian(0)">选择1</li>
          <li class="m2" onclick="bian(1)">选择2</li>
          <li class="m3" onclick="bian(2)">选择3</li>
        </div>

        <div id="ha">
          <li class="k1 disno" style="display: block;">选择1</li>
          <li class="k2 disno">选择2</li>
          <li class="k3 disno">选择3</li>
        </div>

<script type="text/javascript">
    var lis = document.getElementById('hei').children;
    var has = document.getElementById('ha').children;
    function bian(a){
      for(var i=0;i<lis.length;i++){
        if(i==a){
          lis[i].style.color = '#fff';
          has[i].style.display = 'block';
        }else{
          lis[i].style.color = '#000';
          has[i].style.display = 'none';
        }
      }
    }
</script>

猜你喜欢

转载自www.cnblogs.com/lola/p/9254650.html