tab栏切换

最新推荐文章于 2022-10-02 18:38:56 发布

if you hold me tight

最新推荐文章于 2022-10-02 18:38:56 发布

阅读量95

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45401346/article/details/104776690

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述
css代码

<style>
        #list li {
            list-style: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: beige;
            float: left;
            margin-left: 5px;
        }
        
        #list li.current {
            background-color: burlywood;
        }
        
        #list li a {
            text-decoration: none;
        }
    </style>

html代码

<body>
    <div id="menu">
        <ul id="list">
            <li class="current"><a href="http://www.baidu.com">首页</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>
</body>

javaScript 代码

<script>
        /**
         * 获取父级元素中的第一个子元素
         * @param element 父级元素
         * @returns {*} 父级元素中的子级元素
         */
        function getFirstElement(element) {
            if (element.firstElementChild) {
                return element.firstElementChild;
            } else {
                var node = element.firstChild;
                while (node && node.nodeType != 1) {
                    node = node.nextSibling;
                }
                return node;
            }
        }

        function my$(id) {
            return document.getElementById(id);
        };
        //获取所有的li标签
        var liObjs = my$("list").getElementsByTagName("li");
        //循环遍历，找到每一个里中的a，注册事件
        for (var i = 0; i < liObjs.length; i++) {
            //每一个li中的a
            var aObj = getFirstElement(liObjs[i]);
            aObj.onclick = function() {
                //用排他方法  除去所有li的class属性
                for (var j = 0; j < liObjs.length; j++) {
                    liObjs[j].removeAttribute("class");
                }
                //再设置当前被点击的li背景颜色 因为被点击的是a，但设置class的父级元素
                this.parentNode.className = "current";
                //阻止超链接跳转或者默认事件
                return false;
            };
        }
    </script>