Tab选项卡的原生写法

最新推荐文章于 2022-08-11 20:44:10 发布

weixin_33778778

最新推荐文章于 2022-08-11 20:44:10 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xuemingyao/p/5749888.html

本文介绍了一种使用原生JavaScript和jQuery实现的Tab切换效果。通过为每个列表项和对应的内容块添加点击事件，实现了点击列表项时显示相应内容的效果。文章提供了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键点：建立点击事件和显示事件的连接，即点li 1让对应的div1出来，很容易想到遍历、索引

*{margin: 0; padding: 0;}
        ul,li{list-style: none;}
        .tab{background: rgba(2, 153, 255, 0.31); width:350px; height:200px; overflow: hidden;}
        .tab ul{overflow: hidden; background: #359df6;}
        .tab ul li{float: left; width: 80px; height: 40px; line-height: 40px; text-align: center;}
        .tab ul li.selected{background: red; color: #fff;}
        .tab div{display: none;}
        .tab div.selected{display: block;}

<div class="tab" id="tab">
    <ul>
        <li class="selected">li 1</li>
        <li>li 2</li>
        <li>li 3</li>
    </ul>
    <div class="selected">div 1</div>
    <div>div 2</div>
    <div>div 3</div>
</div>

var oTab = document.getElementById("tab");
    var oLis = oTab.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 j=0;j<oDivs.length;j++){
         oLis[j].className="";
         oDivs[j].className="";
         }
         oLis[this.index].className="selected";
         oDivs[this.index].className="selected";
         }*/


        //这是闭包的写法
        (function aaa(index) {
            oLis[index].onclick = function (i) {
                for (var j = 0; j < oDivs.length; j++) {
                    oLis[j].className = "";
                    oDivs[j].className = "";
                }
                oLis[index].className = "selected";
                oDivs[index].className = "selected";
            }
        })(i)
    }

<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>

//这个是jquery的写法，该方法可以写一个，用于一个页面中的多个tab，只要结构一样。
$(".tab li").click(function(){
        var $index=$(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        $(this).parent().siblings().each(function(index,item){
            index === $index ? $(item).addClass("selected") : $(item).removeClass("selected");
        })
    })

转载于:https://www.cnblogs.com/xuemingyao/p/5749888.html