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

Question

我正在尝试添加一个 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 class。

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

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

Answer 1

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

这是一个 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 中删除活动的 class 并为每个链接提供额外的 class (tabs-1, tabs-2 和 tabs-)

  // 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");
  }); 

当然，这两个片段都需要包含在您的脚本标签中，如果尚未导入，您还需要导入 jQuery。

Answer 2

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

1）从这里导入 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>