using jquery to make class active

Question

<div class="tabs">
    <ul id="tab" class="nav nav-tabs">
        <li class="active">
            <a href="#feed" data-toggle="tab">Feed</a>
        </li>
        <li>
            <a href="#dashboard" data-toggle="tab">Dashboard</a>
        </li>
    </ul>
</div>

When a user clicks the link below. i want to change the #dashboard li to active, and remove active from the #feed li. how do i do this?

<a href=".showfollowers" onclick='load_followers();' data-toggle="tab">See All</a>

Answer 1

You better use unobtrusive javascript:

<a href=".showfollowers" id="foo" data-toggle="tab">See All</a>

Code:

$('#foo').click(function(){
        $('#dashboard').addClass('active');
        $('#feed').removeClass('active');
        load_followers();
        return false; // if needed.
    });

Though it can be done with inline scripts, inline code is deprecated.

Answer 2

<div class="tabs">
              <ul id="tab" class="nav nav-tabs">
              <li class="active"><a href="#feed" data-toggle="tab">Feed</a></li>
              <li><a href="dashboard" data-toggle="tab">Dashboard</a></li>
              </ul>
          </div>

<a href="showfollowers" onclick='load_followers();' data-toggle="tab">See All</a>


$('.showfollowers').click(function(){
  $(#tab li).removeClass('active');
  $('#dashboard').parent().addClass('active');

})