引導鏈接到一個帶有一個標籤的選項卡

我正在使用引導程序3，並且在將URL鏈接到特定選項卡時，面板會發生變化，但激活的選項卡並不存在。所以我想要行<a href="#tab2" data-toggle="tab">link</a>，去到標籤2，但它只會去到標籤2的面板，它不會激活標籤。引導鏈接到一個帶有一個標籤的選項卡

下面是HTML：

<div class="tabbable"> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
    <li><a href="#tab3" data-toggle="tab">Section 3</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
    <p><a href="#tab2" data-toggle="tab">link</a>.</p> 
    </div> 

    <div class="tab-pane" id="tab2"> 
    <p> I'm in Section 2.</p> 
    </div> 

<div class="tab-pane" id="tab3"> 
    <p>Howdy, I'm in Section 3 </p> 
    </div> 
</div> 
</div>

您可以在這個環節http://bootply.com/90412

來源

2013-10-28 MariaZ

爲了激活就可以使用jQuery插件，如圖bootstrap的標籤。所以，你可以這塊jQuery的代碼添加到您的程序，以使標籤：

$(function() { 
    $('#tab1 a').click(function (e) { 
     e.preventDefault(); 
     $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }) 
});

您可以檢查此鏈接：Updated code

來源

2013-11-06 04:48:46 Rohitha

感謝這有助於！ – MariaZ

選項卡的激活取決於UL結構進行測試。在您的例子情況下，你可以通過添加到您的文檔的末尾（自舉的JavaScript後）覆蓋插件的單擊事件：

$(function(){ 
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    if($(this).parent().prop('tagName')!=='LI') 
    { 

     $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show'); 
    } 
    else 
    { 
     $(this).tab('show') 
    } 
    }) 
});

編號：Get element type with jQuery

注：一個較短的版本也將工作在這種情況下：

$(function(){ 
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show'); 
}) 
});

來源

2013-10-28 22:29:47

非常感謝這個......！ – MariaZ

我喜歡這一個，因爲它適用於所有鏈接！嗯，我希望bootstrap在下一個版本中實現這個！ – azerafati

像羅希塔的回答，卻多了幾分一般：

$(function() { 
    $('a.link-to-tab').click(function (e) { 
    e.preventDefault(); 
    $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }) 
});

適用於任何具有class="link-to-tab"的定位標記以及要顯示的標籤ID的href。例如，<a class="link-to-tab" href="#tab2">。

來源

2017-10-20 14:32:59 Nathan

引導鏈接到一個帶有一個標籤的選項卡

回答

相關問題