[英]using jquery to make class active
<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更改为active,并从#feed li中删除active。 我该怎么做呢?
<a href=".showfollowers" onclick='load_followers();' data-toggle="tab">See All</a>
你最好使用不引人注目的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.
});
虽然可以使用内联脚本完成,但不推荐使用内联代码。
<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');
})
一种方法是:
$("#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")
这可以帮助你...找到更多关于切换课程的信息http://api.jquery.com/toggleClass/
$("[href='showfollowers']").click(function(event){
event.preventDefault();
$("#tab li").toggleClass("active");
});
我会在元素中添加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/
$("div.tabs li").eq(1).addClass("active").siblings().removeClass("active");
我发现上面的解决方案只对我有用。 选项卡已更改为活动但新内容未显示。 这是我最终得到的:
$('.ext-butt-class').click(function(e){
e.preventDefault();
$(".nav-tabs li").removeClass("active");
$("[href='#requiredtab']").parent().addClass("active");
});
。凡.ext-butt-class
被添加到已触发开关和链接#requiredtab
是我们努力的目标选项卡的一个名称。
希望能帮助其他人使用Roots Wordpress Framework和/或Twitter Bootstrap。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.