Bootstrap標(biāo)簽頁插件怎么使用

這篇文章主要講解了“Bootstrap標(biāo)簽頁插件怎么使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Bootstrap標(biāo)簽頁插件怎么使用”吧！

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站十多年經(jīng)驗(yàn)成就非凡，專業(yè)從事網(wǎng)站建設(shè)、成都做網(wǎng)站，成都網(wǎng)頁設(shè)計，成都網(wǎng)頁制作，軟文發(fā)稿，廣告投放平臺等。十多年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：18980820575，我們期待您的來電！

一、用法
您可以通過以下兩種方式啟用標(biāo)簽頁：

通過 data 屬性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本鏈接中。

添加 nav 和 nav-tabs 類到 ul 中，將會應(yīng)用 Bootstrap 標(biāo)簽樣式，添加 nav 和 nav-pills 類到 ul 中，將會應(yīng)用 Bootstrap 膠囊式樣式。

  
Home
...

通過 JavaScript：您可以使用 Javscript 來啟用標(biāo)簽頁，如下所示：

$('#myTab a').click(function (e) {
 e.preventDefault()
 $(this).tab('show')
})

下面的實(shí)例演示了以不同的方式來激活各個標(biāo)簽頁：

// 通過名稱選取標(biāo)簽頁
$('#myTab a[href="#profile"]').tab('show')
 
// 選取第一個標(biāo)簽頁
$('#myTab a:first').tab('show') 
 
// 選取最后一個標(biāo)簽頁
$('#myTab a:last').tab('show') 
 
// 選取第三個標(biāo)簽頁（從 0 開始索引）
$('#myTab li:eq(2) a').tab('show')

二、淡入淡出效果
如果需要為標(biāo)簽頁設(shè)置淡入淡出效果，請?zhí)砑?.fade 到每個 .tab-pane 后面。第一個標(biāo)簽頁必須添加 .in 類，以便淡入顯示初始內(nèi)容，如下面實(shí)例所示：

 ...