最近在學js核心技術dom，順便寫寫筆記，記錄一下自己的學習成果。今天要記錄的是乙個比較常見的案例，就是切換，用的排他思想，首先我們看看所要達成的效果
點選售後保障出現售後保障的介面，
點選商品評價，出現商品評價的模組。然後我們看看流程
>商品介紹
li>
41<
li>規格與包裝
li>
42<
li>售後保障
li>
43<
li>商品評價
li>
44<
li>手機社群
li>
45ul
>
46div
>
47<
div
class
="tab-con"
>
48<
div
class
="item"
style
="display:block;"
>
49商品介紹模組
50div
>
51<
div
class
="item"
>
52規格與包裝模組
53div
>
54<
div
class
="item"
>
55售後保障模組
56div
>
57<
div
class
="item"
>
58商品評價模組
59div
>
60<
div
class
="item"
>
61手機社群模組
62div
>
63div
>
64div
>
65<
script
>
66//
獲取元素
67var
tab_list
=document.queryselector(
".tab-list");
68var
lis
=document.queryselectorall('li
');69var
items
=document.queryselectorall(
'.item');
70//
for迴圈繫結點選事件
71for
(vari =
0;i
<
lis.length; i
++)
79//
留下我自己，自己的底色變為紅色
80this
.classname ="
current";
81var
index
=this
.getattribute(
"index");
82//
乾掉所有人，所有的板塊都設定為不可見
83for
(vari =
0;i
<
items.length; i
++)
86//
留下我自己，自己的設定為可見
87items[index].style.display ='
block';
88}89}
90script
>
91body
>
92html
>
原諒我初學者，糟糕的布局，我想以後會越來越好！！ 好了 再見啦
tab欄切換布局
案例分析 1.tab欄切換有兩個大的模組 2.上面是模組選項卡，點選某乙個，當前的底色為紅色，其餘不變 排他思想 用修改雷鳴的方式 3.下面的模組內容，會跟隨上面的選項卡變化，所以下面的模組變化需要寫到點選事件裡面 4.規律 下面的模組顯示內容和上面的選項卡意義對應相匹配 5.核心思路 給上面的ta...
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...