Изменение CSS литиево и DIV по щелчку с помощью JQuery

Question

Это мое мнение:

<div class="tabbable">      
     <ul class="nav nav-tabs"> 
      <li id="liTab1" class="active"><a id="a1" data-toggle="tab">Upload TOT Master</a></li> 
      <li id="liTab2"><a id="a2" data-toggle="tab">View TOT Master</a></li> 
      <li id="liTab3"><a id="a3" data-toggle="tab">Upload TOT Master Adhoc</a></li> 
      </ul> 
    <div class="tab-content"> 
      <div class="tab-pane active" id="tab1"> 
       <p>I'm in Section 1.</p> 
      </div> 
      <div class="tab-pane" id="tab2"> 
       <p>Howdy, I'm in Section 2.</p> 
      </div> 
      <div class="tab-pane" id="tab3"> 
       <p>Howdy, I'm in Section 3.</p> 
      </div> 
     </div> 
    </div> 

Приведенный выше код, который представляет собой вид в виде вкладок контейнера, как показано ниже:

На меняя вкладку, я хочу, чтобы ее соответствующий контент div стал активным, а оставшаяся вкладка стала неактивной. Я использовал ниже функции яваскрипта, но он не работает:

JQuery:

$(document).ready(function() { 

    $("#a1").click(function() { 
     $("#liTab1").addClass('active'); 
     $("#liTab2").removeClass('active'); 
     $("#liTab3").removeClass('active'); 
     $("#tab1").addClass('tab-pane active'); 
     $("#tab2").addClass('tab-pane inactive'); 
     $("#tab3").addClass('tab-pane inactive'); 
    }); 

    $("#a2").click(function() { 
     $("#liTab1").removeClass('active'); 
     $("#liTab2").addClass('active'); 
     $("#liTab3").removeClass('active'); 
     $("#tab2").addClass('tab-pane active'); 
     $("#tab1").addClass('tab-pane inactive'); 
     $("#tab3").addClass('tab-pane inactive'); 
    }); 

    $("#a3").click(function() { 
     $("#liTab1").removeClass('active'); 
     $("#liTab2").removeClass('active'); 
     $("#liTab3").addClass('active'); 
     $("#tab3").addClass('tab-pane active'); 
     $("#tab1").addClass('tab-pane inactive'); 
     $("#tab2").addClass('tab-pane inactive'); 
    }); 

}); 

Как этого добиться?

Answer 1

Twitter-bootstrap-tabs имеет еще одно свойства в html называется data-target, которые при установке в соответствующем tab цели будет автоматически делать это для вас без помощи javascript. Проверьте код ниже и DEMO здесь

<ul class="nav nav-tabs"> 
    <li id="liTab1" class="active"><a id="a1" data-target="#tab1" data-toggle="tab">Upload TOT Master</a></li> 
    <li id="liTab2"><a id="a2" data-target="#tab2" data-toggle="tab">View TOT Master</a></li> 
    <li id="liTab3"><a id="a3" data-target="#tab3" data-toggle="tab">Upload TOT Master Adhoc</a></li> 
</ul> 

Answer 2

У вас нет доступа к этому пункту в отдельности, ни вы должны добавить якорь внутри списка. Вы можете просто изменить указатель, используя css.

Вы можете изменить HTML следующим образом:

<li id="liTab1" class="active" data-tab="tab1">Upload TOT Master</li> 
<li id="liTab2" data-tab="tab2">View TOT Master</li> 
<li id="liTab3" data-tab="tab3">Upload TOT Master Adhoc</li> 

и это JS кусок кода:

$('ul.nav-tabs li').click(function(){ 
     var tab_id = $(this).attr('data-tab'); 

     $('ul.nav-tabs li').removeClass('active'); 
     $('.tab-pane').removeClass('active'); 

     $(this).addClass('active'); 
     $("#"+tab_id).addClass('active'); 
    });