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

时间:2012-10-26 20:12:19

标签: jquery css twitter-bootstrap

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

这有效,但这是正确的方法吗?

3 个答案:

答案 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”,请注意我的安全问题。