Bootstrap链接到带有url的选项卡 [英] Bootstrap linking to a tab with an url

问题描述

我正在使用bootstrap 3，我在将URL链接到特定选项卡时遇到一些问题，面板发生了变化，但激活的选项卡没有。
所以我想要一行< a href =＃tab2data-toggle =tab> link< / a> ，转到tab2，但它只进入tab2的面板，它不会激活标签。

I am working with bootstrap 3, and I am having some problems on linking a url to a specific tab, the panel changes but the activated tab doesnt. So I want the line <a href="#tab2" data-toggle="tab">link</a>, to go to the tab2, but it only goes to the panel of the tab2, it doesn't activate the tab.

这是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

You can test this in this link http://bootply.com/90412

推荐答案

为了激活选项卡，您可以使用 bootstrap 中显示的jQuery插件。
所以你可以将这段jQuery代码添加到你的程序中以启用标签：

In order to activate the tab you can use jQuery plugin as shown in bootstrap. So you can add this piece of jQuery code to your program to enable the tab:

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

您可以查看以下链接：更新代码

You can check this link: Updated code

这篇关于Bootstrap链接到带有url的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！