案例分析
1.tab欄切換有兩個大的模組；
2.上面是模組選項卡，點選某乙個，當前的底色為紅色，其餘不變（排他思想），用修改雷鳴的方式；
3.下面的模組內容，會跟隨上面的選項卡變化，所以下面的模組變化需要寫到點選事件裡面；
4.規律：下面的模組顯示內容和上面的選項卡意義對應相匹配；
5.核心思路：給上面的tab_list裡面的所有小li新增自定義屬性，屬性值從0開始編號（索引）；
6.當我們點選tab_list裡面的某個小li，讓tab_con裡面對應序號的內容顯示，其餘隱藏（派他思想）。
效果展示
>tab欄切換布局
title
>
6<
style
>7*
8li9.tab
10.tab_list
11.tab_list li
12.tab_list .current
13.item
14style
>
15head
>
16<
body
>
17<
div
class
="tab"
>
18<
div
class
="tab_list"
>
19<
ul>
20<
li class
="current"
>商品介紹
li>
21<
li>規格與包裝
li>
22<
li>售後保障
li>
23<
li>商品評價（50000）
li>
24<
li>手機社群
li>
25ul
>
26div
>
27<
div
class
="tab_con"
>
28<
div
class
="item"
style
="display: block;"
>商品介紹模組內容
div>
29<
div
class
="item"
>規格與包裝模組內容
div>
30<
div
class
="item"
>售後保障模組內容
div>
31<
div
class
="item"
>商品評價（50000）模組內容
div>
32<
div
class
="item"
>手機社群模組內容
div>
33div
>
34div
>
35<
script
>
36//
獲取元素
37var
tab_list
=document.queryselector(
".tab_list");
38var
lis=
tab_list.queryselectorall("li
");39var
tab_con
=document.queryselector(
".tab_con");
40var
items
=tab_con.queryselectorall(
".item");
41//
for迴圈
42for
(vari=
0;i<
lis.length;i++)
52//
留下自己
53this
.classname="
current";
5455
//2.下面的顯示內容模組 排他思想
56var
index
=this
.getattribute(
"index");
57for
(vari=
0;i<
items.length;i++)
60items[index].style.display="
block";
6162}63
}64script
>
65body
>
66html
>
tab欄切換操作
最近在學js核心技術dom，順便寫寫筆記，記錄一下自己的學習成果。今天要記錄的是乙個比較常見的案例，就是切換，用的排他思想，首先我們看看所要達成的效果 點選售後保障出現售後保障的介面，點選商品評價，出現商品評價的模組。然後我們看看流程 商品介紹 li 41 li 規格與包裝 li 42 li 售後保...
jQuery實戰 tab欄切換
jquery實現tab欄切換 html結構 class active 第一欄li 第二欄li 第三欄li 第四欄li ul class content class tab selected 我是第一欄的內容div class tab 我是第二欄的內容div class tab 我是第三欄的內容div...
tab欄切換 js案例
tab欄切換 js案例 商品介紹li class select 規格與包裝li class select 售後保障li class select 商品評價 5000 li class select 手機社群li class content class demo style display block...