jQuery 根据 URL 链接使 Bootstrap 选项卡处于活动状态

Make Bootstrap tab Active on the bases of URL link

提问by Q-bart

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

我有引导标签，我想让标签在 URL 链接的基础上处于活动状态。

For example:

例如：

xyz.xxx/index#tab2should make tab2 activeon page load.

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

Here is my code so far

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

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

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.

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

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

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

回答by Anil Panwar

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

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

var url = window.location.href;

Get the tab to make active from url link.

从 url 链接获取选项卡以使其处于活动状态。

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

Remove old active tab class

删除旧的活动选项卡类

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

Add active class to new tab

将活动类添加到新选项卡

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

Or directly open tab after getting activeTab.

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

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

回答by Patel Disha

You can use this code:

您可以使用此代码：

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav.nav-pills a[href="' + hash + '"]').tab('show'); 
  $('ul.nav.nav-pills a').click(function (e) {
     $(this).tab('show');
     var scrollmem = $('body').scrollTop();
     window.location.hash = this.hash;
  });
});

回答by Tim Kariuki

You can add an id to <ul class="nav nav-tabs nav-stacked" id="myTab">then use the following javascript code:

您可以添加一个 id，<ul class="nav nav-tabs nav-stacked" id="myTab">然后使用以下 javascript 代码：

$(document).ready(() => {
  let url = location.href.replace(/\/$/, "");

  if (location.hash) {
    const hash = url.split("#");
    $('#myTab a[href="#'+hash[1]+'"]').tab("show");
    url = location.href.replace(/\/#/, "#");
    history.replaceState(null, null, url);
    setTimeout(() => {
      $(window).scrollTop(0);
    }, 400);
  } 

  $('a[data-toggle="tab"]').on("click", function() {
    let newUrl;
    const hash = $(this).attr("href");
    if(hash == "#home") {
      newUrl = url.split("#")[0];
    } else {`enter code here`
      newUrl = url.split("#")[0] + hash;
    }
    newUrl += "/";
    history.replaceState(null, null, newUrl);
  });
});

For more details follow this link.

有关更多详细信息，请访问此链接。

回答by lukehillonline

Depending on how you have set up your JS you should be able to do this:

根据您设置 JS 的方式，您应该能够执行以下操作：

www.myurl.com/page#tab1

www.myurl.com/page#tab1

www.myurl.com/page#tab2

www.myurl.com/page#tab2

www.myurl.com/page#tab3

www.myurl.com/page#tab3

Where #tab1, #tab2and #tab3are equal to the idof the tab

其中#tab1，#tab2和#tab3等于id选项卡的

EDIT

编辑

See here: Twitter Bootstrap - Tabs - URL doesn't change

请参阅此处： Twitter Bootstrap - 标签 - URL 不会改变

回答by Swapnil Ghone

If you just want to trigger it based on url, the you can also do as follow

如果你只是想根据url触发它，你也可以这样做

$(function(){
   var hash = window.location.hash;
   if(hash != ''){
      $("a[href='"+url+"']").click();
   }
})