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

Question

我有 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处于事件状态。

Answer 1

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

var url = window.location.href;

从 url 链接获取要激活的选项卡。

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

删除旧的事件选项卡类

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

将事件类添加到新选项卡

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

或者获取activeTab后直接打开tab。

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