Bootstrap 3: How to link to another navbar by clicking a hyperlink in current navbar content?

Question

I'm a beginner using Bootstrap. I've searched a lot of related problems but didn't find useful solution. Here is part of my code:

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

What I want to do is: when click "FAQs", it can not only show the content of faqs, but also navigate to "FAQs" on the navigation bar, but now it is still under the "About" bar.

Answer 1

You can use the method show.bs.tab , described in the Official Documentation .

Basically, you listen to the newly-active just-shown tab, you get its id and highlight the corresponding element inside the nav .

Here's the code:

 $('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>

Link to a working Codepen .