CODEWITHSUNDEEP
javascriptjqueryhtmlcssasp.net-mvc
thevan
thevan

Reputation: 10364

Change the css of li and div on click using jQuery

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:

enter image description here

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?

Upvotes: 1

Views: 1399

Answers (2)

Tiziano Mischi
Tiziano Mischi

Reputation: 186

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

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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>

Upvotes: 3

Related Questions