Bootstrap - 打開(kāi)標(biāo)簽頁(yè)

代碼:

$('#myTab a[href="#profile"]').tab('show')
$('#myTab a:first').tab('show')
$('#myTab a:last').tab('show')
$('#myTab li:eq(2) a').tab('show')

首先我們要對(duì)元素設(shè)置點(diǎn)擊事件。

添加點(diǎn)擊事件的元素:

<ul class="dropdown-menu" role="menu">
              <li><a href="#">Chrome</a></li>
              <li><a href="#">Safari</a></li>
              <li><a href="#">IE</a></li>
              <li><a href="#">Firefox</a></li>
</ul>

標(biāo)簽頁(yè)我們需要打開(kāi)的:

<div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">...</div>
        <div role="tabpanel" class="tab-pane" id="profile">...</div>
        <div role="tabpanel" class="tab-pane" id="messages">...</div>
        <div role="tabpanel" class="tab-pane" id="settings">...</div>
      </div>

</div>

1.我們給兩個(gè)父元素設(shè)置id,確保好找到。

$(document).ready(function() {

  $("#demo-dropdown a").click(function() {
    var href = $(this).attr("href");
    console.log(href);
    $("#tab-list li a[href= '" + href + "']" ).tab("show");

  });


});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,551評(píng)論 19 139
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,131評(píng)論 1 92
  • 鬼節(jié)和電閃雷鳴更配哦 被嚇醒之后縮在被窩瑟瑟發(fā)抖 網(wǎng)易日推真是神奇的所在 推了這首《rain and tears》...
    Alice王志榮閱讀 651評(píng)論 0 0
  • 生活是一場(chǎng)血雨腥風(fēng)的廝殺,在社會(huì)這個(gè)大戰(zhàn)場(chǎng)上,你一旦表露出軟弱的姿態(tài),周?chē)木头鋼矶?,像圍剿一個(gè)獵物一樣,瞬間就...
    躲雨De屋檐閱讀 183評(píng)論 0 2
  • 得了精神分裂癥的大堂哥,有一天發(fā)病,砍了爺爺墳上的松樹(shù),當(dāng)天我父親(大堂哥的親四叔)騎電動(dòng)車(chē)摔到了陰溝里。不知道是...
    阿游筆記閱讀 353評(píng)論 0 2

友情鏈接更多精彩內(nèi)容