使用jQuery使类处于激活状态

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>

当用户点击下面的链接时，我想将#dashboard li更改为活动状态，并从#feed li中移除活动状态。我该怎么做？

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

- arboles

Answer 1

您最好使用不显眼的JavaScript：

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

代码：

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

虽然可以使用内联脚本来实现，但内联代码已不推荐使用。

- gdoron is supporting Monica

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

})

- Jayantha Lal Sirisena

Answer 3

其中一种方法是：

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

这将首先删除所有'li'元素的类"active"，然后将其添加到#dashboard选项卡的li元素中。

另一种方法是使用siblings()函数。

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

- zhujy_8833

Answer 4

希望这能对你有所帮助......了解更多关于切换类的信息http://api.jquery.com/toggleClass/

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

- Dharmesh

Answer 5

我发现上面的解决方案对我只有部分有效。选项卡变为活动状态，但新内容没有显示出来。这是我最终采用的方法：

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

其中，.ext-butt-class 是添加到触发开关的链接中的类名，#requiredtab 是我们要定位的选项卡的 a-name。

希望这可以帮助使用 Roots Wordpress 框架和 / 或 Twitter Bootstrap 的其他人。

- Mere Development

Answer 6

我会给元素添加id，这样可以更容易地识别元素。

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

脚本

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

工作示例：http://jsfiddle.net/H2BBn/2/

- Shyju

Answer 7

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

- DG3

---

如果您先移除第一个元素，就不需要查找兄弟元素了。$("div.tabs li").removeClass("active").eq(1).addClass("active"); - epascarello