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标签中删除了“有效”类，并将其添加回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

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

$("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＆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”，请注意我的安全问题。

检查子href时将类添加到父<li> </li>

3 个答案: