-1

Focus here is... the tab that I click needs to be the only one selected, even if there are two sets of tabs on my page (as shown below):

http://codepen.io/mutualdesigns/pen/pbGjbX

NOTE: Once I click in one of the tabs above, and then one below, I have two tabs selected at the same time. If I had a third set of tab, and clicked a link on this third set, I was going to have 3 activated (selected) links...

HOW DO I GET ONLY THE LINK I CLICKED SELECTED (EVEN THOUGH THERE'S ANOTHER SELECTION IN ONE OF THE OTHERS SETS OF TABS)? 

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#1" aria-controls="1" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#2" aria-controls="2" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#3" aria-controls="3" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#4" aria-controls="4" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a href="#5" aria-controls="5" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#6" aria-controls="6" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#7" aria-controls="7" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#8" aria-controls="8" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="1">1</div>
    <div role="tabpanel" class="tab-pane" id="2">2</div>
    <div role="tabpanel" class="tab-pane" id="3">3</div>
    <div role="tabpanel" class="tab-pane" id="4">4</div>
    <div role="tabpanel" class="tab-pane" id="5">5</div>
    <div role="tabpanel" class="tab-pane" id="6">6</div>
    <div role="tabpanel" class="tab-pane" id="7">7</div>
    <div role="tabpanel" class="tab-pane" id="8">8</div>
  </div>

</div>
filipenx
  • 1
  • 1
  • Don't SHOUT it won't help answer your question. Have you considered looping all tabs in JS and removing all 'active' css classes from the tabs, before adding the class to the last clicked tab – Jelmergu Oct 02 '17 at 17:43
  • I didn't mean to shout, just to emphasize, sorry about that. I've tried that already, didn't work. – filipenx Oct 02 '17 at 18:31

1 Answers1

1

A solution (neither the best, nor the prettiest) is the following. I based it loosely on suggestions given here

<script>
    function toggle(clickedElem) {
        // Store all active elements in a variable for later use
        var elements = document.querySelectorAll(".nav-tabs li.active"); 
        // Iterate over the elements and remove the active class from the classlist. We made sure there was a active class by using the querySelector
        for (var i = 0; i < elements.length; i++) {
            elements[i].classList.remove('active');
        }
        // Add the active class to the parent of the clicked link
        clickedElem.parentElement.classList.add("active");
    }
</script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#1" aria-controls="1" role="tab" data-toggle="tab" onclick="toggle(this)">Home</a></li>
    <li role="presentation"><a href="#2" aria-controls="2" role="tab" data-toggle="tab" onclick="toggle(this)">Profile</a></li>
    <li role="presentation"><a href="#3" aria-controls="3" role="tab" data-toggle="tab" onclick="toggle(this)">Messages</a></li>
    <li role="presentation"><a href="#4" aria-controls="4" role="tab" data-toggle="tab" onclick="toggle(this)">Settings</a></li>
</ul>
<!--not going to be repeating the same code but the rest of your code continues here(add the onclick to the other tags obviously)-->

This could also be done using jQuery. For that you'd be using toggleClass or removeClass/addClass

P.S. emphasized text (template after clicking the I in the editor.

Jelmergu
  • 973
  • 1
  • 7
  • 19
  • plus uno...Very close to an issue that Im trying to solve. I have a page with multiple tabs and the first ("active") tab get focus on post back...I would ask a Q: but Im banned for asking bad questions...jaja. – Chris Catignani Jul 23 '18 at 22:14