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

最新推荐文章于 2024-09-05 11:53:05 发布

JunXian9102

最新推荐文章于 2024-09-05 11:53:05 发布

阅读量308

点赞数

本文链接：https://blog.csdn.net/smiple9102/article/details/62217862

版权

js-dom基础课堂笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

子元素实现菜单切换效果
先遍历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>