原生js、jQuery實現選項卡功能

在大家在網上平常瀏覽網頁的時候，想必各位都會看到選項卡功能，在這里給大家詳解一下用原生js、jQuery如何來寫一些基本的選項卡

話不多說，先給各位看一下功能圖：

             　　　　

好了，下邊開始寫代碼了：

HTML代碼：

<ul>
    <li class="click">red</li>
    <li>blue</li>
    <li>yellow</li>
</ul>
<div class="box">
    <div class="show"></div>
    <div></div>
    <div></div>
</div>

CSS代碼:

*{
    margin: 0;
    padding: 0;
}
ul{
    overflow: hidden;
    /*注意父級元素塌陷，詳情見博客*/
}
ul li{
    width: 100px;
    height: 30px;
    float: left;
    border: 1px solid #000;
    list-style: none;
    border-right: none;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}
ul li:last-child{
    border-right: 1px solid #000000;
}
.box{
    position: relative;
}
.box div{
    width: 304px;
    height: 300px;
    position: absolute;
    display: none;
}
.box div:first-child{
    background-color: red;
}
.box div:nth-child(2){
    background-color: blue;
}
.box div:last-child{
    background-color: yellow;
}
.box .show{
    display: block;
}
.box .hide{
    display: none;
}
.click{
    background-color: #ccc;
}

 

原生JS寫法：

 

var liAll = document.querySelectorAll('li');//獲取要操作的元素
var divAll = document.querySelectorAll('.box div');//獲取被操作的跟隨元素
for (var i = 0;i<liAll.length;i++) { //for循環為每一個元素添加點擊事件
    liAll[i].index = i;    //作用域的問題，如果for循環使用let聲明，則不需要該行代碼
    liAll[i].onclick = function () { 
        for (var j = 0;j<liAll.length;j++) {
            liAll[j].className = "";//將所有被操作的元素的背景色消失
            divAll[j].className = "hide";//將所有被操作的元素全部隱藏
        }
        this.className = "click";//當前被點擊的元素背景色改變
        divAll[this.index].className = "show";//將所有被操作的元素跟隨顯示
    }
}

 

jQuery寫法：

引入jQuery文件 網址：https://www.bootcdn.cn/jquery/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>

 

$("li").each(function  (index , ele) {//each循環遍歷。得到所有的li  index代表li的下表，ele元素
    $(this).click(function () {//$(this) 表示當前點擊的元素
        $(this).addClass("click");
        $(this).siblings().removeClass("click");
        $(".box div:eq("+index+")").css({"display":"block"}); //eq  根據each循環得出index的所引值  取對應的div顯示
        $(".box div:eq("+index+")").siblings().css({"display":"none"}); //對應的div隱藏
    });
});

 源代碼下載地址：https://github.com/Mere-scholar/tab

如果您有看不明白的地方，可以留言，咱們共同交流！

前端知識更新的很快，繼續努力吧！