JavaScriptr——Tab栏切换案列

最新推荐文章于 2023-08-09 19:45:10 发布

X Dou

最新推荐文章于 2023-08-09 19:45:10 发布

阅读量236

点赞数

分类专栏： JavaScript 文章标签： js栏目切换

本文链接：https://blog.csdn.net/qq_42707446/article/details/84103491

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid#ccc;
        }

        .hd {
            width: 100%;
            height: 50px;
        }

        .hd ul {
            display: flex;
            height: 50px;
        }

        .hd li {
            width: 100%;
            line-height: 50px;
            text-align: center;
            border-right: 1px solid#fff;
            background-color: #ccc;
            cursor: pointer;
        }

        .hd li:last-child {
            border-right: none;
        }

        .hd .cls {
            background-color: rgba(126, 177, 245, .5);
        }

        .bd {
            width: 100%;
            height: 250px;
            background-color: rgba(126, 177, 245, .5);
        }

        .bd li {
            display: none;
        }

        .bd .current {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="hd">
            <ul>
                <li class="cls">王者荣耀</li>
                <li>QQ飞车</li>
                <li>英雄联盟</li>
                <li>刺激战场</li>
            </ul>
        </div>
        <div class="bd">
            <ul>
                <li class="current">我是王者</li>
                <li>我是飞车</li>
                <li>我是联盟</li>
                <li>我是吃鸡</li>
            </ul>
        </div>
    </div>
    <script>
        function my$(id) {
            return document.getElementById(id);
        }
        //获取最外层id
        var boxobj = my$("box");
        //获取里层第一个div
        var hdobj = boxobj.getElementsByClassName("hd")[0];
        //获取里层第二个div
        var bdobj = boxobj.getElementsByClassName("bd")[0];
        //获取里层第一个div中所有的li
        var list = hdobj.getElementsByTagName("li");
        //获取里层第二个div中所有的li
        var lists = bdobj.getElementsByTagName("li");
        //循环遍历第一个div中所有的li
        for (var i = 0; i < list.length; i++) {
            //设置第一个div中所有的li对应的索引值
            list[i].setAttribute("index", i)
            //第一个div中所有的li注册点击事件
            list[i].onclick = function () {
                //循环遍历第一个div中所有的li
                for (var j = 0; j < list.length; j++) {
                    //先删除第一个div中所有的li的类属性
                    list[j].removeAttribute("class");
                }
                //当前点击li的类属性为cls
                this.className = "cls";
                //获取当前点击的li的索引值
                var num = this.getAttribute("index");
                //循环遍历第二个div中所有的li
                for (var k = 0; k < lists.length; k++) {
                    //先删除第二个div中所有的li的类属性
                    lists[k].removeAttribute("class");
                }
                //把获取当前点击的li的索引值放入第二个div中当前的li中，并设置第二个div中当前的li的类属性
                lists[num].className = "current";
            }
        }
    </script>
</body>

</html>

X Dou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScriptr——Tab栏切换案列

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫