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

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

假设我在URL中输入#tab2，则应在页面加载时默认激活选项卡2。

- Q-bart

---

你想根据URL使选项卡处于活动状态，例如如果在URL中传递#tab2，则具有id tab2的选项卡应处于活动状态？ - Anil Panwar

没错，就是这样。 - Q-bart

Answer 1

您可以使用jQuery实现，类似以下代码。 例如您的URL为"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后，可以直接打开标签页。

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

- Anil Panwar

---

可以直接使用 document.location.hash 获取访问 URL 结尾处的哈希值，避免中间人攻击。请注意不要改变原意。 - Luke Stevenson

这个问题的最佳实践是什么？ - Cyrlop

Answer 2

1. 获取URL中的哈希值并显示活动选项卡
2. 将当前哈希设置为URL

您可以使用此代码：

$(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');
     $('body').scrollTop();
     window.location.hash = this.hash;
  });
});

- Patel Disha

---

适用于Bootstrap 4.3。 - StefanJM

在Bootstrap 3.3中也适用。我在选择器中删除了“.nav-pills”。 - Roberto

我已经尝试了许多Bootstrap 5的方法来解决这个用例，其中这个非常有帮助，谢谢。大多数其他方法在新版本的BS上都不起作用。唯一需要注意的是，BS5不需要jQuery，因此纯JS选项可能更好。 - nicorellius

Answer 3

$(function(){
    var url = window.location.href;
    var activeTab = url.substring(url.indexOf("#") + 1);
    if($.trim(activeTab) == 'Exhibitor') // check hash tag name for prevent error
    {
        $(".tab-pane").removeClass("active in");
        $("#" + activeTab).addClass("active in");
        $('a[href="#'+ activeTab +'"]').tab('show');
    }
});

- Ali Ahmad Pasa

Answer 4

根据您如何设置JS，您应该能够做到这一点：

www.myurl.com/page#tab1

www.myurl.com/page#tab2

www.myurl.com/page#tab3

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

编辑

参见： Twitter Bootstrap - Tabs - URL doesn't change

- lukehillonline

Answer 5

如果你只想基于URL触发它，那么你也可以按照以下方式操作。

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

- Swapnil Ghone

Answer 6

您可以给<ul class="nav nav-tabs nav-stacked" id="myTab">添加一个id，然后使用以下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);
  });
});

更多详情请 点击此链接。

- Tim Kariuki

Answer 7

使用URL API中的URL()构造函数：

URL {
  href: "https://stackoverflow.com/posts/67036862/edit",
  origin: "https://stackoverflow.com",
  protocol: "https:",
  username: "",
  password: "",
  host: "stackoverflow.com",
  hostname: "stackoverflow.com",
  port: "",
  pathname: "/posts/67036862/edit",
  search: ""
}

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

$(function() {
  /**
   * Make Bootstrap tab Active on the bases of URL link
   */
  const loc = new URL(window.location.href) || null
  if (loc !== null) {
    console.debug(loc)
    if (loc.hash !== '') {
      $('.tab-pane').removeClass('active in')
      $(loc.hash).addClass('active in')
      $(`a[href="${ loc.hash }"]`).tab('show')
    }
  }
})

- JV conseil

Answer 8

这段代码：

window.addEventListener('load', () => {
  try {
    let url = window.location.href.split('#').pop();
    document.querySelector('#'+url).click();
  } catch {

  }
});

e.g.

http://localhost:5000/#idOfTab

- Mikael Souza

---

你的回答可以通过添加更多关于代码的信息以及它如何帮助提问者来改进。 - Tyler2P