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

您可以查看以下链接：Updated code

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

参考：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');
 })
 });

Answer 3

像Rohitha的回答一样，但更为笼统：

$(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">。

Bootstrap链接到带有url的选项卡

3 个答案: