欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何控制标签切换显示?

程序员文章站 2024-02-08 21:44:10
...

第一种方法:原生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");
    })
})
相关标签: 实践总结