dom03 子元素实现菜单切换效果

来源：互联网发布：php safe mode 编辑：程序博客网时间：2024/06/02 05:13

子元素实现菜单切换效果
先遍历li，后加点击事件，
先使所有的li的className为空
后绑定类名

<body><div id="menu">    <ul id="list">        <li class="current"><a href="javascript:void(0)">首页</a></li>        <li><a href="javascript:void(0)">播客</a></li>        <li><a href="javascript:void(0)">博客</a></li>        <li><a href="javascript:void(0)">相册</a></li>        <li><a href="javascript:void(0)">关于</a></li>        <li><a href="javascript:void(0)">帮助</a></li>    </ul></div><script>//需求：点击菜单栏实现颜色切换    var ul=document.getElementById('list');    var menu=document.getElementById('menu');    //console.log(ul.children);    var lis=ul.children;    for (var i = 0; i < lis.length; i++) {        lis[i].onclick=function () {         for (var i = 0; i < lis.length; i++) {            lis[i].className="";         };         this.className="current";    };    }</script>

0 0