jquery - 根据URL链接使Bootstrap选项卡处于事件状态

我有 bootstrap 选项卡，我想基于URL链接使选项卡处于事件状态。

例如:

xyz.xxx/index#tab2 应该在页面加载时将 tab2激活为。

到目前为止，这是我的代码

<div class="tab-wrap">
  <div class="parrent pull-left">
    <ul class="nav nav-tabs nav-stacked">
      <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01">Tab 1</a></li>
      <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02">Tab 2</a></li>
      <li class=""><a href="#tab3" data-toggle="tab" class="analistic-03">Tab 3</a></li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane active in" id="tab1">
      <p> hello 1</p>
    </div>

    <div class="tab-pane" id="tab2">
      <p> hello 2</p>
    </div>

    <div class="tab-pane" id="tab3">
      <p>Hello 3</p>
    </div>
  </div> <!--/.tab-content-->
</div><!--/.tab-wrap-->

默认情况下，它使tab1处于事件状态，因此在我的情况下，根据我的URL链接，有可能使第二个选项卡在默认情况下处于事件状态。

假设如果我将＃tab2放在URL中，则默认情况下应在页面加载时使tab2处于事件状态。

最佳答案

您可以使用jquery这样的方法来实现它。
您的网址，例如“www.myurl.com/page#tab1”；

var url = window.location.href;

获取选项卡以从URL链接激活。

 var activeTab = url.substring(url.indexOf("#") + 1);

删除旧的事件选项卡类

 $(".tab-pane").removeClass("active in");

将事件类(class)添加到新选项卡

$("#" + activeTab).addClass("active in");

或在获得activeTab后直接打开选项卡。

$('a[href="#'+ activeTab +'"]').tab('show')

关于jquery - 根据URL链接使Bootstrap选项卡处于事件状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34491182/