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

• Linking to specific twitter bootstrap tabs from URL on same page
• Jump to specific tab from another tab with Bootstrap's nav-tabs
• Any way to get BootStrap tabs to be activated via the URL?
• Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
• show tab with external link with onclick in bootstrap 3
• how to link twitter bootstrap tabs from hyper link on otherpages
• Bootstrap linking to a tab with an url
• Externally Linking to a Tab, Tab not changing, Bootstrap 3.3.5
• Go to Specific Tab on different Page link click and toggle active class

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=".1.1/jquery.min.js"></script>
<script src=".3.7/js/bootstrap.min.js"></script>
<link href=".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>

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

• Linking to specific twitter bootstrap tabs from URL on same page
• Jump to specific tab from another tab with Bootstrap's nav-tabs
• Any way to get BootStrap tabs to be activated via the URL?
• Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
• show tab with external link with onclick in bootstrap 3
• how to link twitter bootstrap tabs from hyper link on otherpages
• Bootstrap linking to a tab with an url
• Externally Linking to a Tab, Tab not changing, Bootstrap 3.3.5
• Go to Specific Tab on different Page link click and toggle active class

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>

• javascript
• jquery
• html
• twitter-bootstrap

• 1 What is the problem? Could you explain more? – SaidbakR Commented Nov 23, 2017 at 9:46
• 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_ Commented Nov 26, 2017 at 13:30
• 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 Commented Nov 26, 2017 at 15:25
• 1 ... I should have deactivated my content and script blockers before posting the question – sorry about the confusion, and many thanks again! – 32k_ Commented Nov 27, 2017 at 18:27

2 Answers 2

Replace $(document).load to $(document).ready

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>

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