jquery - 将类添加到父级检查孩子href时

Question

我正在使用 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>

---

这行得通，但它是正确的方法吗？

Answer 1

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

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

Answer 2

有很多方法可以做到...

$(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');
});

Answer 3

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

$("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”，您会遇到安全问题。