3

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>
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
32k_
  • 87
  • 2
  • 12
  • 1
    What is the problem? Could you explain more? – SaidbakR Nov 23 '17 at 09: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
  • element also changes? In other words, what would be the best way to toggle the
  • active class? Many thanks in advance.
    • – 32k_ Nov 26 '17 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 Nov 26 '17 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_ Nov 27 '17 at 18:27