多用tab選項卡執行個體

一、功能介紹：

把自動切換、滑鼠滑動切換、按一下滑鼠切換寫在一個指令碼裡，只需要修改html中的相關參數就可以完成多種效果的切換，不需重新編寫js指令碼，方便實用。。。。。。。。。

一、指令碼引用

需引用jquery.js和tabs_jquery.js指令碼

<scripttype="text/javascript"src="xxx/jquery-1.7.2.min.js"></script>

<scripttype="text/javascript"src="xxx/tabs_jquery.js"></script>

二、html結構

<divclass=”tab_atab”>

<ulclass=”tabMenu”>

<liclass="active">選項卡一</li>

<li>選項卡二</li>

</ul>

<divclass=”tabInner”>

<divclass="tablistshow">切換內容一</div>

<divclass="tablisthide">切換內容二</div>

</div>

</div>

說明：

1、tab，tabMenu，tabInner，tablist為樣式結構名稱，每個選項卡必須加上，但可以沒有樣式。需要注意它們之間的結構關係：tab為最外層，tabMenu為切換按鈕層，tabInner為需要切換的內容層，tablist為具體需要顯示和隱藏的層。

2、選項卡可以通過給外層附加樣式屬性來控制如：<divclass=”tab_atab”>可以通過tab_a來對這個選項卡附加樣式。

3、show，hide樣式為顯示和隱藏屬性注意在樣式中的優先順序一定要大於tablist）。參考寫法如下：

.show{display:block;}

.hide{display:none;}

三、屬性設定：

<divclass=”tab_atab”ev=”click”timer=”2000”>

<ulclass=”tabMenu”>

<liclass="active">選項卡一</li>

<li>選項卡二</li>

</ul>

<divclass=”tabInner”>

<divclass="tablistshow">切換內容一</div>

<divclass="tablisthide">切換內容二</div>

</div>

</div>

html結構說明中藍色部分為可設定參數的屬性，說明如下：

1、<divclass=”tab”>

說明：沒有參數，為預設切換方式，滑鼠滑到選項按鈕上切換對應的內容。

2、<divclass=”tab”ev=”click”>

說明：添加ev=”click”參數，表示滑鼠點擊選項按鈕時切換對應的內容。

3、<divclass=”tab”timer=”2000”>

說明：添加timer=”2000”，表示每2s自動切換一次。

4、<divclass=”tab”ev=”click”timer=”2000”>

說明：同時添加ev和timer參數，表示滑鼠點擊切換，並且每2s自動切換一次內容。

5、如載入網頁時需要預設顯示特定選項卡的內容，請在對應的切換按鈕上添加class=’active’，並在對應的內容顯示層上添加class=’show’，其他的內容顯示層添加class=’hide’。

如需要預設顯示第二個選項卡：

<divclass=”tab_atab”ev=”click”timer=”2000”>

<ulclass=”tabMenu”>

<li>選項卡一</li>

<liclass="active">選項卡二</li>

</ul>

<divclass=”tabInner”>

<divclass="tablisthide">切換內容一</div>

<divclass="tablistshow">切換內容二</div>

</div>

</div>

四、其它：

具體源碼和執行個體請參考附件

本文出自 “執手蘭舟” 部落格，轉載請與作者聯絡！