基于 URL 链接使 Bootstrap 选项卡处于活动状态 [英] Make Bootstrap tab Active on the bases of URL link

问题描述

我有引导选项卡，我想在 URL 链接的基础上激活选项卡.

I have bootstrap tabs and i want to make tabs active on the bases of URL link.

例如:

xyz.xxx/index#tab2 应该在页面加载时使 tab2 处于活动状态.

xyz.xxx/index#tab2 should make tab2 active on page load.

这是我目前的代码

<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 链接使第二个选项卡默认处于活动状态.

By default it make tab1 active so there might be possibility in my case to make the second tab active by default on the basis of my URL links.

假设如果我将#tab2 放在 URL 中，那么它应该在页面加载时默认激活 tab2.

Suppose if i put #tab2 in URL then it should make tab2 active by default on page load.

推荐答案

你可以使用类似这样的jquery来实现它.您的网址，例如www.myurl.com/page#tab1"；

You can achieve it using jquery something like this. Your URL for example "www.myurl.com/page#tab1";

var url = window.location.href;

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

Get the tab to make active from url link.

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

删除旧的活动标签类

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

将活动类添加到新标签

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

或者得到activeTab后直接打开tab.

Or directly open tab after getting activeTab.

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

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