Bootstrap tabs - point two tabs same time

Question

I've got bootstrap tab with following code:

Fiddle

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home" onclick="location.href='#home1'">Home</a></li>
  <li><a data-toggle="tab" href="#menu1" onclick="location.href='#menu11'">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>

<hr />

<div class="tab-content">
  <div id="home1" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu11" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>

and JS

$('.nav-tabs a').click(function(){
    $(this).tab('show');
})

how to make it work in that way, after clicking one link - content of two DIVS will be changes? i was looking for info how to point not the ID but class, so far without sucess.

Answer 1

I created a jsfiddle http://jsfiddle.net/an0r4buk/1/ to showcase what you're trying to achieve.

$('.nav-tabs a').click(function () {
    $(this).tab('show');
    $("<a>").data("target", $(this).data("second-tab")).tab("show")
})

Bootstrap toggles one tab at a time, that's why I create a new anchor element and set it's target to the second tab you want to show.

I modified your HTML like this:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home" data-second-tab="#home1">Home</a>
    </li>
    <li><a data-toggle="tab" href="#menu1" data-second-tab="#menu11">Menu 1</a>
    </li>
</ul>

The href attribute is used for the first tab (home/home1), the data-second-tab toggles the second tab.

Answer 2

try this http://jsfiddle.net/serGlazkov/an0r4buk/2/

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var $previousActiveTab = $(e.relatedTarget);
    var $newlyActiveTab = $(e.target);
    var other = $previousActiveTab.attr('href') + '1';
    var other1 = $newlyActiveTab.attr('href') + '1';
    $(other).removeClass('active in');
    $(other1).addClass('active in');
})

Answer 3

Mark your second div.tab-content with id="tab-content2" then the following code will do the trick:

$('.nav-tabs a').click(function(){
  $(this).tab('show')
  var name = $(this).attr('href').substr(1)
  $('#tab-content2').children().each(function(el) {
    if (name + '1' === $(this).attr('id')) {
      $(this).addClass('active')
    } else {
      $(this).removeClass('active')
    }
  })
})