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

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

?? ? ? ? ? ??　　　　

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

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;/*注意父級(jí)元素塌陷，詳情見博客*/ } 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; } 基本樣式的設(shè)置

?

原生JS寫法：

?

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

?

jQuery寫法：

引入jQuery文件 網(wǎng)址：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循環(huán)遍歷。得到所有的li index代表li的下表，ele元素$(this).click(function () {//$(this) 表示當(dāng)前點(diǎn)擊的元素$(this).addClass("click");$(this).siblings().removeClass("click");$(".box div:eq(" index ")").css({"display":"block"}); //eq 根據(jù)each循環(huán)得出index的所引值 取對(duì)應(yīng)的div顯示$(".box div:eq(" index ")").siblings().css({"display":"none"}); //對(duì)應(yīng)的div隱藏 }); });

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

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

前端知識(shí)更新的很快，繼續(xù)努力吧！

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的原生js、jQuery实现选项卡功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。