如何從外部鏈接導航到引導程序 5 的特定選項卡

Question

單擊另一個頁面的鏈接后，我想將用戶重定向到特定選項卡。 這是第1頁的代碼：index.html

<div class="products-btn">
    <a href="products.html#pills-profile">view all</a>
</div>

第 2 頁 產品.html:

<ul class="nav nav-pills justify-content-center" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs- 
         target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria- 
         selected="true">products</button>
    </li>
    <li class="nav-item" role="presentation">
         <button class="nav-link" id="solve" data-bs-toggle="pill" data-bs-target="#pills- 
          profile" type="button" role="tab" aria-controls="pills-profile" aria- 
          selected="false">solutions</button>
    </li>
</ul>

我想將用戶從產品的 btn 重定向到解決方案選項卡。 我在所有頁面中都使用引導程序 5.1。

Answer 1

只需在“#”之后的鏈接中添加標簽的 ID <a href="products.html#solve">view all</a>

Answer 2

如果你想從 product.html 移動到 solution.html onclick 你可以使用href：

<a href="solution.html">solution</a>

Answer 3

檢查根文件夾並將完整路徑從index.html寫入products.html

然后添加這個

<a href="{your path to the page}/products.html#pills-tab">products</a>

例子：
我在此文件夾中有名為folder1的索引和文件夾，還有另一個名為folder2的文件夾，其中包含產品頁面：

<a href="folder1/folder2/products.html">products</a>

另一個例子：
我想 go 回到index.html ：

<a href="../../index.html">products</a>

../表示 go 進入上一個/父文件夾

---

錨定Mozilla

Answer 4

這有點舊，所以不確定你是否找到了答案，但這對我有用。

if(window.location.hash == '#someHash' ) { 
 var someVarName = document.querySelector('#theTabID'); // theTabID of the tab you want to open
 var tab = new bootstrap.Tab(someVarName);
 tab.show();
}

在此處的引導程序 5 文檔中找到： https://getbootstrap.com/docs/5.1/components/navs-tabs/#via-javascript