tab栏切换

最新推荐文章于 2023-06-24 18:17:01 发布

前端黑

最新推荐文章于 2023-06-24 18:17:01 发布

阅读量165

点赞数 1

分类专栏：平时的碎片

本文链接：https://blog.csdn.net/qq_38964133/article/details/96017762

版权

平时的碎片专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一共两个大案例

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

<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
    /* CSS样式制作 */
    
    * {
        margin: 0px;
        padding: 0px;
        font: 12px normal "microsoft yahei";
    }
    
    a {
        text-decoration: none;
        color: black;
        display: block;
    }
    
    a:hover {
        text-decoration: none;
        color: #336699;
    }
    
    #tabs ul {
        list-style: none;
        display: block;
        height: 30px;
        line-height: 30px;
        border-bottom: 2px solid saddlebrown;
        width: 300px;
    }
    
    #tabs ul li {
        float: left;
        cursor: pointer;
        width: 60px;
        height: 28px;
        line-height: 28px;
        margin: 0 3px;
        border: 1px solid #aaaaaa;
        border-bottom: none;
        text-align: center;
    }
    
    #tabs ul li.on {
        border-top: 2px solid saddlebrown;
        border-bottom: 2px solid #fff;
    }
    
    #tabs div {
        width: 290px;
        height: 120px;
        line-height: 25px;
        border: 1px solid #336699;
        border-top: none;
        padding: 5px;
    }
    
    .hide {
        display: none;
    }
    </style>
    <script type="text/javascript">
    // JS实现选项卡切换
    window.onload = function() {
        var oTab = document.getElementById("tabs");
        var oUl = oTab.getElementsByTagName("ul")[0];
        var oLis = oUl.getElementsByTagName("li");
        var oDivs = oTab.getElementsByTagName("div");

        for (var i = 0; i < oLis.length; i++) {
            oLis[i].index = i;
            oLis[i].onclick = function() {
                for (var n = 0; n < oLis.length; n++) {
                    oLis[n].className = "";
                    oDivs[n].className = "hide";
                }
                this.className = "on";
                oDivs[this.index].className = "";
            }
        };
    }
    </script>
</head>

<body>
    <div id="tabs">
        <ul>
            <li class="on">北京</li>
            <li class="off">上海</li>
            <li class="off">南京</li>
        </ul>
        <div id="firstPag" class="show">
            <a href="#">275万购昌平邻铁三居 总价20万买一居</a>
            
        </div>
        <div id="secondPag" class="hide">
            <a href="#">40平出租屋大改造 美少女的混搭小窝</a>
            
        </div>
        <div id="thirdPag" class="hide">
            <a href="#">通州豪华3居260万 二环稀缺2居250w甩</a>
            
        </div>
    </div>
</body>

</html>
 -->
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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="common.js"></script>
    <script>
    //获取最外面的div
    var box = my$("box");
    //获取的是里面的第一个div
    var hd = box.getElementsByTagName("div")[0];
    //获取的是里面的第二个div
    var bd = box.getElementsByTagName("div")[1];
    //获取所有的li标签
    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); //================================
        spans[i].onclick = function() {
            //第一件事,所有的span的类样式全部移除
            for (var j = 0; j < spans.length; j++) {
                spans[j].removeAttribute("class");
            }

            //第二件事,当前被点击的span应用类样式
            this.className = "current";
            //span被点击的时候获取存储的索引值
            //alert(this.getAttribute("index"));
            var num = this.getAttribute("index"); //==============================

            //获取所有的li标签,每个li标签先全部隐藏
            for (var k = 0; k < list.length; k++) {
                list[k].removeAttribute("class");
            }
            //当前被点击的span对应的li标签显示
            list[num].className = "current";
        };
    }
    </script>
</body>

</html>

前端黑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab栏切换

一共两个大案例<!-- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/css"> /* CSS样式制作 */ ...
复制链接

扫一扫

专栏目录