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>

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

我要做的是：当点击“FAQs”时，它不仅可以显示FAQs的内容，还可以导航到导航栏上的“FAQs”，但现在它仍然在“About”栏下。

Answer 1

您可以使用show.bs.tab 方法，在Official Documentation 中描述。

基本上，您聆听刚刚显示的新激活选项卡，您会得到它的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>

链接到工作中的Codepen。