Bootstrap链接到带有url的选项卡

Question

我正在使用bootstrap 3,并且我在将URL链接到特定选项卡时遇到一些问题,面板更改但激活的选项卡不会.所以我想要行<a href="#tab2" data-toggle="tab">link</a>,转到tab2,但它只进入tab2的面板,它不会激活选项卡.

这是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中进行测试

Answer 1

为了激活选项卡,您可以使用jQuery插件,如bootstrap中所示.因此,您可以将这段jQuery代码添加到您的程序中以启用选项卡:

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

您可以查看此链接:更新的代码

Answer 2

标签的激活取决于ul结构.在您的示例中,您可以通过添加到文档的末尾(在Boostrap的Javascript之后)覆盖插件的click事件:

$(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')
    }
  })
});

参考:使用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');
 })
 });