如何控制标签切换显示？

第一种方法:原生JS实现！

切换标签

部分html代码

    <div class="seckill">
        <div class="seckill-head"></div>
        <!-- 控制内部的浮动 容器 -->
        <div class="seckill-container">
            <div class="seckill-nav">
                <ul id="tabs">
                    <li class="active"><em>14:00</em><span><em>抢购中<br>距结束 00:36:28</em></span></li>
                    <li><em>20:00</em><span>即将开始</span></li>
                    <li><em>20:00</em><span>即将开始</span></li>
                    <li><em>22:00</em><span>明日开始</span></li>
                    <li><em>00:00</em><span>明日开始</span></li>
                </ul>
            </div>

            <div id="lists" class="seckill-goods">
                <ul class="active"> <!-- 这里的类名，可以随便取，不一定要active -->
                    <li>
                        <div class="bg"><img src="/img/小米秒杀2.jpg" alt=""></div>
                        <div class="info">
                            <span class="title">第一个图片Pro.6" I5 8G 1T PCI</span><br>
                            <span class="desc">更强悍的专业笔记本</span><br>
                            <span class="price">6499.00元 <del>6799元</del></span><br>
                            <span class="btn">登录后抢购</span>
                        </div>
                    </li>
.......

CSS代码

seckill-nav li,
.seckill-goods ul {
    display: none;  /*先设置为空，隐藏*/
}
seckill-nav .active,
.seckill-goods .active{
    display: block; /*当我有类名active的时候，就让它显示出来*/
}

js代码

window.onload=function(){
    var tabs = document.getElementById("tabs").getElementsByTagName("li"); //这是获取时间栏的li
    //console.log(tabs);
    var lists = document.getElementById("lists").getElementsByTagName("ul"); //这是获取内容的ul
     
    
    for(var i = 0; i < tabs.length; i++){
        tabs[i].onclick = showlist;  //当点击的时候引用下面我们自定义的函数。
        lists[i].onclick = showlist;
    } // 把时间栏的点击事件 和 内容的点击事件放在一起，这样就会形成联系在一起！（第1一个时间对应第一个内容）
    
    
    function showlist(){
        for(var i = 0; i < tabs.length; i++){
            if(tabs[i] == this){
                tabs[i].className = "active";  //当我们点击第 i个标签时， i的标签添加class="active"
                lists[i].className = "active"; //同理
            }
            else {
                tabs[i].className = "";
                lists[i].className = "";  //没有点击的其它标签的class为空
            }
        }
    }
}

整体的思路是：
一、先获取时间栏里面的li标签
二、for循环遍历所有的li  |  ul 的数量
三、写发生点击事件时的函数
四、函数的思路很简单：“
	当我点击哪一个li或者哪一个ul的时候，我给它添加个active类。      
								   有class="active"的标签，可以显示出来
	没有点击的其它标签全部设置为空就行了。
”

第二种方法：jq实现

html代码

代码和上面的一样
不过在html开始的时候要引入jq
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

CSS代码一样
jq代码

$(function() {
    //mousemove
    $("#tabs>li").click(function(){
        //给移入的li加入active
        $(this).addClass("active");
        //清空其它li标签里面存在的active
        $(this).siblings().removeClass("active");
        //获取当前的索引(当前的点击)
        var tabsli = $(this).index();
        console.log(tabsli);
        //显示ul的内容
        var lists = $("#lists>ul").eq(tabsli);
        console.log(lists);
        lists.addClass("clearfix active");
        lists.siblings().removeClass("clearfix active");
    })
})

来源：CSDN

作者：鱼天龙

链接：https://blog.csdn.net/weixin_44709426/article/details/103846135

标签

class