javascript - using jquery to make class active - Stack Overflow

admin管理员组

文章数量:1352177

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

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

• javascript
• jquery
• html
• css
• hide

Share Improve this question Follow edited Apr 22, 2012 at 1:55 Joseph 120k3030 gold badges184184 silver badges237237 bronze badges asked Apr 22, 2012 at 1:53 arbolesarboles 1,33144 gold badges2222 silver badges3939 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

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.

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

})

One way to do that is:

$("#tab li").removeClass("active");
$("#dashboard").parent().addClass("active");

This will firstly remove class "active" for all of 'li' elements then add it to the li element of #dashboard tab.

The other way is to use siblings() function.

var dashboard = $("#dashboard").parent(),
    siblings = dashboard.siblings();
siblings.removeClass("active");
dashboard.addClass("active")

may this helps you... find more about toggle class http://api.jquery./toggleClass/

$("[href='showfollowers']").click(function(event){
   event.preventDefault(); 
   $("#tab li").toggleClass("active");
});

I would add id to the element so that it will nbe easy to identify elements.

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

Script

$(function(){
  $("#aSeeAll").click(function(e){
    e.preventDefault();
    $("#tab li").removeClass("active");
    $("#lidashboard").addClass("active");
  });    
});

Working sample : http://jsfiddle/H2BBn/2/

$("div.tabs li").eq(1).addClass("active").siblings().removeClass("active");

I found that the solutions above worked only partially for me. The tab changed to active but the new content didn't show. Here's what I ended up with:

$('.ext-butt-class').click(function(e){
    e.preventDefault();
    $(".nav-tabs li").removeClass("active");
    $("[href='#requiredtab']").parent().addClass("active");
});

.where .ext-butt-class is added to the link that's triggering the switch and #requiredtab is the a-name of the tab we're trying to target.

Hope that helps someone else using Roots Wordpress Framework and/or Twitter Bootstrap.

本文标签： javascriptusing jquery to make class activeStack Overflow