原生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>

*ulul liul li:last-child.box.box div.box div:first-child.box div:nth-child(2).box div:last-child.box .show.box .hide.click

原生js寫法：

var liall = document.queryselectorall('li');//

獲取要操作的元素
var divall = document.queryselectorall('.box div');//
獲取被操作的跟隨元素
for (var i = 0;i//
for迴圈為每乙個元素新增點選事件
liall[i].index = i; //
作用域的問題，如果for迴圈使用let宣告，則不需要該行**
liall[i].onclick = function
() 
this.classname = "click";//
當前被點選的元素背景色改變
divall[this.index].classname = "show";//
將所有被操作的元素跟隨顯示
}}

引入jquery檔案 **：

$("li").each(function  (index , ele) ); //

eq 根據each迴圈得出index的所引值 取對應的div顯示
$(".box div:eq("+index+")").siblings().css(); //
對應的div隱藏
});});

原生js選項卡

275萬購昌平鄰鐵三居 總價20萬買一居 200萬內購五環三居 140萬安家東三環 北京首現零首付樓盤 53萬購東5環50平 京樓盤直降5000 中信府 公園樓王現房 40平出租屋大改造 美少女的混搭小窩 經典清新簡歐愛家 90平老房煥發新生 新中式的酷色溫情 66平撞色活潑家居 瓷磚就像選好老婆 ...

原生JS寫選項卡

封裝兩個方法deleteclass addclass 給元素新增classname function addclass elem,value else 給元素刪除classname function deleteclass elem,value html id tabs id lists class...

選項卡套選項卡

實現 項卡套小選項卡 項卡切換同時小選項卡也進行切換，且每次 項卡的切換是在小選項卡切換完後進行 大的外層的選項卡 大的選項卡內部有乙個小的選項卡 功能 自動切換 滑鼠經過切換 方案一 不可行 開兩個定時器，乙個控制外層選卡，乙個控制內層選卡。仔細分析發現，外層選項卡的切換是需要在內層選卡全部切換完...