Change the css of li and div on click using jQuery

Question

This is my view:

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

The above code which represents the view in tab container format like below:

On changing the tab, I want its corresponding content div should become active and remaining tab would become inactive. I used the below javascript function, but its not working:

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');
    });

});

How to achieve this?

Answer 1

Twitter-bootstrap-tabs have one more property in html called data-target which when set to its corresponding tab target will automatically do this for you without any help of javascript . Check the below code and DEMO here

<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

You don't have to access the item individually nor you have to add the anchor inside the list. You can just change the pointer using css.

You can change html in this way:

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

and this is the js piece of code:

    $('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');
    });