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

Question

I'm trying to add a Bootstrap tab panel goes like this:

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

Now I need to give link to users to see the panes like this:

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

But this won't work because the tab-pane with an id of tabs-2 does not have the .active class.

However, if I try loading https://sitename.com/page#tabs-1 The page properly redirects me to tab-pane with an id of tabs-1 (because it has .active class by default)

So how can I redirect users to different tab panes correctly?

Answer 1

I already started answering your old question before you deleted it, but here is it again. I didn't understood what you were trying to achieve, so I just looked into the code and made my version, its not the best but it works.

This is an onClick event handler, it gets executed on a click in your nav and changes the active classes.

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

This part gets executed when you reload your page. You need to change your HTML for this to work, so remove the active class from nav-link and give every link an additional class (tabs-1, tabs-2 and 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");
  }); 

Both snippets need to be included in your script tag of course, also you need to import jQuery, if not already happened.

Answer 2

You don't really need to check the fragment to switch between those tabs.

1) Import jQuery from here or:

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

2) Add this part to your code.

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