0

我正在使用 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 标签中删除了“active”类,并将其添加回 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>

这行得通,但它是正确的方法吗?

4

3 回答 3

6

你做的很好。但是我不会删除标签中的类属性,而是这样做,因为将来您可能会使用多个类。

$("ul.nav > li").removeClass("active");
于 2012-10-26T20:15:54.550 回答
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');
});
于 2012-10-26T20:18:28.310 回答
0

一般来说,你有很多选择器。尽量避免使用它们以获得更好的性能(如果你在乎的话)。

$("ul.nav > li").removeAttr("class");

这条线看起来不对。相反,我会做

$("ul.nav > li").removeClass("active");

关于这条线

$("ul.nav > li a[href*='contacts.aspx']").parent("ul.nav > li").addClass("active");

你确定你不能将 LI 在服务器端激活吗?

请注意,如果您从 URL 中删除“contacts.aspx”,您会遇到安全问题。

于 2012-10-26T20:20:58.267 回答