js ----- Tab栏切换

最新推荐文章于 2024-08-21 18:05:31 发布

YuaKeNG

最新推荐文章于 2024-08-21 18:05:31 发布

阅读量96

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/Yuake2/article/details/105321546

版权

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

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

        .hd {
            height: 45px;
        }

        .hd span {
            display: inline-block;
            width: 90px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }

        .hd span.current {
            background-color: purple;
        }

        .bd li {
            height: 255px;
            background-color: purple;
            display: none;
        }

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

</head>
<body>
<div class="box" id="box">
    <div class="hd">
        <span class="current">体育</span>
        <span>娱乐</span>
        <span>新闻</span>
        <span>综合</span>
    </div>
    <div class="bd">
        <ul>
            <li class="current">我是体育模块</li>
            <li>我是娱乐模块</li>
            <li>我是新闻模块</li>
            <li>我是综合模块</li>
        </ul>
    </div>
</div>

<script src="publick.js"></script>
function my$(id){
    return document.getElementById(id);
}

 // 获取做最外面的div
    var box = my$("box");
    // 获取的是大盒子里面的第一个div
    var hd = box.getElementsByTagName("div")[0];
    // 获取里面第二个div
    var bd = box.getElementsByTagName("div")[1];
    // 获取bd里面的所有的li  3
    var list = bd.getElementsByTagName("li");//集合，伪数组
    // 获取所有的span
    var spans = hd.getElementsByTagName("span");//伪数组，集合
    // 循环遍历 添加点击事件
    for(var i = 0; i < spans.length; i++){
        // 思路：我们可以给 span存储下标--自定义属性，我是在点击之前存储还是在点击之后存储（大白话：就像我们去买菜一样，我们要先存钱，有了钱之后再去买菜）
        spans[i].setAttribute("index",i);//一定要在点击之前存储---规范 1
        // 给spans绑定点击事件
        spans[i].onclick = function(){
            // 排他思想：第一件事情：所有的span类样式全部移除
            for(var j = 0; j < spans.length; j++){
                spans[j].removeAttribute("class");
            }
            // 第二件事，单击谁，谁就加这个类样式
            this.className = "current";
            // 存储完了，我获取看看呀
            // 测试代码看看我们刚刚存储的下标能不能获取到
            //alert(this.getAttribute("index"));--要学会测试代码
            var num = this.getAttribute("index");//2 我已经把span里面的索引存了

            // 4，循环遍历--典型的排他思想，第二次排他思想的应用
            for(var k = 0; k < list.length; k++){//循环遍历所有的li
                // 第一件事情：让所有的li隐藏
                list[k].removeAttribute("class");
            }
            // 5、 第二件事情：自己显示，但是我们这个列表的索引是根据上面存储的列表一一对应的。
            list[num].className = "current";

        }
    }