Bootstrap 3：如何通过单击当前导航栏内容中的超链接来链接到另一个导航栏？

Question

我是使用 Bootstrap 的初学者。我搜索了很多相关问题，但没有找到有用的解决方案。这是我的代码的一部分：<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><div class="container">    <!-- Navigation Bar -->    <nav class="navbar navbar-default">      <div class="container-fluid">        <div class="navbar-header">          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"            aria-expanded="true" aria-controls="navbar">            <span class="sr-only">Toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>          <a class="navbar-brand">Function Graph</a>        </div>                <div id="navbar" class="navbar-collapse collapse">          <ul class="nav navbar-nav">            <li class="active"><a data-toggle="tab" href="#about">About</a></li>            <li class="dropdown">              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Plot<span class="caret"></span></a>              <ul class="dropdown-menu">                <li><a class="dropdown-item" data-toggle="tab" href="#automatic">Automatic</a></li>                <li><a class="dropdown-item" data-toggle="tab" href="#manual">Manual</a></li>              </ul>            </li>            <li><a data-toggle="tab" href="#faqs">FAQs</a></li>            <li><a data-toggle="tab" href="#comment">Comment</a></li>            <li><a data-toggle="tab" href="#contact">Contact</a></li>          </ul>        </div>      </div>    </nav>我想做的是：点击“常见问题解答”时，不仅可以显示常见问题解答的内容，还可以在导航栏上导航到“常见问题解答”，但现在还在“关于”栏下。

Answer 1

您可以使用官方文档show.bs.tab中描述的方法。

基本上，你会听到新激活的刚刚显示的选项卡，你会得到它id并突出显示nav.

这是代码：

$('a[data-toggle="tab"]').on('shown.bs.tab', function() {

  $('nav').find('li.active').removeClass('active');

  $('nav').find('a[href="#'+$('.tab-pane.active').attr('id')+'"]').parent('li').addClass('active');

});

<script

  src="https://code.jquery.com/jquery-2.2.4.js"

  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="

  crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">

    <!-- Navigation Bar -->

    <nav class="navbar navbar-default">

      <div class="container-fluid">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"

            aria-expanded="true" aria-controls="navbar">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand">Function Graph</a>

        </div>

        

        <div id="navbar" class="navbar-collapse collapse">

          <ul class="nav navbar-nav">

            <li class="active"><a data-toggle="tab" href="#about">About</a></li>

            <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Plot<span class="caret"></span></a>

              <ul class="dropdown-menu">

                <li><a class="dropdown-item" data-toggle="tab" href="#automatic">Automatic</a></li>

                <li><a class="dropdown-item" data-toggle="tab" href="#manual">Manual</a></li>

              </ul>

            </li>

            <li><a data-toggle="tab" href="#faqs">FAQs</a></li>

            <li><a data-toggle="tab" href="#comment">Comment</a></li>

            <li><a data-toggle="tab" href="#contact">Contact</a></li>

          </ul>

        </div>

      </div>

    </nav>

    <!-- Tab Content -->

    <div class="tab-content">

      <div class="tab-pane fade in active" id="about">

        <div class="jumbotron">

          <h1>Draw your math function on web</h1>

          <p>If you have any problems, please navigate to <em><strong><a data-toggle="tab" href="#faqs">FAQs</a></strong></em> on the top and there are some solutions.</p>

          <p>If you still have unsolved questions, please don't hesitate to <em><strong><a data-toggle="tab" href="#contact">Contact</a></strong></em> us via e-mail.</p>

        </div>

      </div>

      <div class="tab-pane fade" id="automatic">

        <p>automatic</p>

      </div>

      <div class="tab-pane fade" id="manual">

        <p>manual</p>

      </div>

      

      <div class="tab-pane fade" id="faqs">

        <p>faqs</p>

      </div>

      <div class="tab-pane fade" id="comment">

        <p>comment</p>

      </div>

      <div class="tab-pane fade" id="contact">

        <p>contact</p>

      </div>

    </div>

  </div>