我正在使用twitter Bootstrap框架,我想根据显示的页面更改活动链接。 (如果这不适合Stackoverflow,只需删除它)
基本导航菜单html如下。注意班级'活跃'?这突出了活动链接。
<ul class="nav">
<li class="active"><a href="default.aspx">View Programs</a></li>
<li><a href="addprogram.aspx">Add Programs</a></li>
<li><a href="contacts.aspx">Contacts</a></li>
</ul>
jQuery代码...我从所有li标签中删除了“有效”类,并将其添加回li标签,并显示指向该页面的链接。
$(document).ready(function () {
$("ul.nav > li").removeAttr("class");
$("ul.nav > li a[href*='contacts.aspx']").parent("ul.nav > li").addClass("active");
});
这个知道给了我......
<ul class="nav">
<li><a href="default.aspx">View Programs</a></li>
<li><a href="addprogram.aspx">Add Programs</a></li>
<li class="active"><a href="contacts.aspx">Contacts</a></li>
</ul>
这有效,但这是正确的方法吗?
答案 0 :(得分:6)
你做的很好。但是我不会删除标记中的class属性,而是会这样做,因为将来你可以使用多个类。
$("ul.nav > li").removeClass("active");
答案 1 :(得分:0)
有很多方法可以做到这一点......
$(function () {
// I'd just use removeClass()
$("ul.nav > li").removeClass("active");
// And just grab the closest() list-item, just easier to read
$("ul.nav > li a[href*='contacts.aspx']").closest('li').addClass('active');
});
答案 2 :(得分:0)
一般来说,你有很多选择器。尽量避免使用它们以获得更好的性能(如果你愿意的话)。
$(“ul.nav&gt; li”)。removeAttr(“class”);
这条线看起来不对劲。相反,我会做
$(“ul.nav&gt; li”)。removeClass(“active”);
关于这一行
$(“ul.nav&gt; li a [href * ='contacts.aspx']”)。parent(“ul.nav&gt; li”)。addClass(“active”);
你确定你不能在服务器端将LI作为活动邮件吗?
如果您从网址中删除“contacts.aspx”,请注意我的安全问题。