如何通过单击链接打开特定的引导选项卡答案

【问题标题】：How to open specific Bootstrap tab by clicking on a link如何通过单击链接打开特定的引导选项卡
【发布时间】：2022-01-23 20:19:32
【问题描述】：

我正在尝试添加一个 Bootstrap 选项卡面板，如下所示：

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a>
    </li>
</ul><!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="tabs-1" role="tabpanel">
        <p>First Panel</p>
    </div>
    <div class="tab-pane" id="tabs-2" role="tabpanel">
        <p>Second Panel</p>
    </div>
    <div class="tab-pane" id="tabs-3" role="tabpanel">
        <p>Third Panel</p>
    </div>
</div>

现在我需要向用户提供链接才能看到这样的窗格：

https://sitename.com/page#tabs-2

但这不起作用，因为 ID 为 tabs-2 的选项卡窗格没有 .active 类。

但是，如果我尝试加载 https://sitename.com/page#tabs-1 该页面会正确地将我重定向到 id 为 tabs-1 的选项卡窗格（因为它默认具有 .active 类）

那么如何正确地将用户重定向到不同的选项卡窗格？

【问题讨论】：

标签： javascript html twitter-bootstrap bootstrap-4 tabs

【解决方案1】：

您实际上不需要检查片段即可在这些选项卡之间切换。

1) 从here 导入 jQuery 或：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

2) 将此部分添加到您的代码中。

<script>
  $(document).ready(function () {
    $('.nav-tabs a').click(function () {
      $(this).tab('show');
    });
  });
</script>

【讨论】：

我试过这个但不起作用:(

【解决方案2】：

在你删除之前我已经开始回答你的老问题了，但又来了。我不明白你想要实现什么，所以我只是查看了代码并制作了我的版本，它不是最好的，但它可以工作。

这是一个 onClick 事件处理程序，它在您的导航中单击时执行并更改活动类。

  // onClick event handler, gets executed on click
  $(".nav-link").on("click", (e) => {
    // store clicked element
    const listItem = e.target;
    // get hash
    const hash = e.target.hash;

    // remove all active classes
    $(".nav-link, .tab-pane").removeClass("active");

    // add active class to list item and tab panes
    $(listItem).add(hash).addClass("active");
  });

这部分会在您重新加载页面时执行。您需要更改 HTML 以使其正常工作，因此从 nav-link 中删除活动类并为每个链接添加一个附加类（tabs-1、tabs-2 和 tabs-3）。

  // when page is reloaded
  $(document).ready(() => {
    // get current hash
    const hashList = window.location.hash;
    const hashItems = hashList.slice(1);
    // remove all active classes
    $(".nav-link, .tab-pane").removeClass("active");

    // add active class to nav-link and pane
    $(hashList).add(`.${hashItems}`).addClass("active");
  });

当然，两个 sn-ps 都需要包含在你的 script 标签中，如果还没有的话，你还需要导入 jQuery。

【讨论】：