tab標籤切換原理總結

首先tab標籤的思路就是當鼠標單擊時候可以切換窗口內容，也就是說要有兩個框，其中一個是頭部，一個是與頭部關聯的框。

<div>我是標題</div>

<div>我是內容</div>

而其中它的切換時由不少這種組合來完成的，每一個內容裏面就能夠寫不一樣的東西。而後再用一個大的盒子把這些包裹起來

<div class="zhuti" onLand="tab(n_1)">//這個是整個標籤的主體    onland是載入function tab(cab)這個函數的意思

<div class="menus1" id="tab1" onclick="tab(n_1)">我是標題</div>

<div class="menus2" id="tab2" onclick="tab(n_2)">我是標題2</div>

.......

<div class="menus100" id="tab100">我是標題100</div>//這個就是說你能夠無限的加標籤若是須要

</div>//這是頭部標籤的結尾包裹住了頭部標籤

而後在作一個跟頭部標籤相似的內容標籤

<div class="">//這個是包裹整個內容的標籤

<div class="nei_1" id="n_1">我是內容1</div>

<div class="nei_2" id="n_2">我是內容2</div>

.......

<div class="nei_2" id="n_100">我是內容100</div>//同上路的意思

</div>//這裏包裹住了全部的內容

若是隻是想實現tab內容切換的效果只須要寫

function tab(cad)

{

n_1.style.display="none"//讓id爲n_1的標籤的css樣式display爲隱藏

n_2.style.display="none"//讓id爲n_2的標籤的css樣式display爲隱藏

......

n_100.style.display="none"讓id爲n_100的標籤的css樣式display爲隱藏

 

最後這是實現的關鍵代碼

cab.style.display="block"//讓單擊鼠標所對應的標籤出現

}這個代碼就能夠簡單的tab標籤實現原理

}

而後是css樣式的設定，若是不設定的話，直接預覽代碼的html樣式則是不少混亂的內容標籤，當單擊一次的時候出現

.nei_2

{

display:none;

}//這是爲了把除了nei_1覺得的標籤都隱藏，這樣初始看到的就只有nei_1.