bootstrap open tab from link

Question

Javascript / jQuery newbie here. This question has been asked numerous times before but I am not able to implement any of the solutions and make them work on my single-page website. My code below. So far, I have tried variations of the following (without success):

Below is the closest I have got to a solution. What am I missing?

$(document).load(function() {
  $('#section-A a').click(function(e) {
    e.preventDefault();
    $('a[href="' + $(this).attr('href') + '"]').tab('show');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<section id="section-A">

  <blockquote class="blockquote">
    <p>Some text here ...
      <a href="#tab-1">Tab 1 hyperlink text</a> blablabla
      <a href="#tab-2">Tab 2 hyperlink text</a> and blabla
      <a href="#tab-3">Tab 3 hyperlink text</a> and blabla
      <a href="#tab-4">Tab 4 hyperlink text</a> and bla.
    </p>
  </blockquote>

</section>


<div id="section-B">

  <ul class="nav nav-pills">
    <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1 title</a></li>
    <li class=""><a href="#tab-2" data-toggle="tab">Tab 2 title</a></li>
    <li class=""><a href="#tab-3" data-toggle="tab">Tab 3 title</a></li>
    <li class=""><a href="#tab-4" data-toggle="tab">Tab 4 title</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab-1" class="tab-pane active">Tab 1 Lorem ipsum …</div>
    <div id="tab-2" class="tab-pane">Tab 2 Lorem ipsum …</div>
    <div id="tab-3" class="tab-pane">Tab 3 Lorem ipsum …</div>
    <div id="tab-4" class="tab-pane">Tab 4 Lorem ipsum …</div>
  </div>

</div>

Thanks a lot @SaidbakR, this worked. I have a quick follow-up question: How can the jQuery code be modified so that the active state of the <li> element also changes? In other words, what would be the best way to toggle the <li> active class? Many thanks in advance. — 32k_
I could not able to understand what do you need exactly?! The li active class is already toggled, i.e the blue background is appeared on click its tab and it disappeared on click over another tab! — SaidbakR
... I should have deactivated my content and script blockers before posting the question – sorry about the confusion, and many thanks again! — 32k_

SaidbakR SaidbakR · Accepted Answer · 2017-11-23T09:52:21

2

votes

Just use $(document).ready() instead of load. Checkout this demo

bootstrap open tab from link

2 Answers