如何從外部鏈接打開引導程序 3 選項卡？

Question

我想在我網站的另一個頁面中創建一個針對特定選項卡的鏈接。

我試圖創建這樣的鏈接：www.example.com/test.html#tab2，但它總是針對第一個選項卡（我猜是帶有顯示類的選項卡）。

索引.html

<a href="test.html#menu-catalog">link for catalog</a>

文本文件

<ul class="nav nav-tabs">
  <li id="homeTab" class="active"><a data-toggle="tab" href="#home" aria-expanded="true">menu 1</a></li>
  <li id="menu1Tab"><a data-toggle="tab" href="#menu1">menu 2</a></li>
  <li id="menu2Tab"><a data-toggle="tab" href="#menu-catalog">menu 3</a></li>
  <li id="menu3Tab"><a data-toggle="tab" href="#menu3">menu 4</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">  
    ...
  </div>
  <div id="menu1" class="tab-pane fade">
   ....
  </div>
  <div id="menu-catalog" class="tab-pane fade">
    ...
  </div>
  <div id="menu3" class="tab-pane fade">
    ...
  </div>
</div>

當我單擊 index.html 中的鏈接以定位並打開具有正確 ID 的選項卡時。

Answer 1

如果您使用 bootstrap + jquery 設置，您可以通過以下方式輕松獲得此行為：

 $(() => { const { hash } = document.location; if (!hash) return false; $(`.nav.nav-tabs [href="${hash}"]`).tab('show'); });

Answer 2

嘗試這個

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});