Javascript 仅在父li上添加活动

Javascript 仅在父li上添加活动,javascript,jquery,css,Javascript,Jquery,Css,我只知道基本的jQuery。我想通过jQuery在父li上添加活动类 现场- 转到那里,然后转到“支持”菜单下的第2页。您可以看到在所有li上添加活动类的代码以及父级liSupport。 我需要修改代码,这样父级liSupport将获得活动类,而不是父级+所有子级li 代码- <ol id="menu"> <li><a href="Default.aspx" title="Home Page" style="color:#FFF">Home&

我只知道基本的jQuery。我想通过jQuery在父li上添加活动类

现场- 转到那里,然后转到“支持”菜单下的第2页。您可以看到在所有li上添加活动类的代码以及父级liSupport。 我需要修改代码,这样父级liSupport将获得活动类,而不是父级+所有子级li

代码-

 <ol id="menu">
        <li><a href="Default.aspx" title="Home Page" style="color:#FFF">Home</a>        
        <li><a href="OverView.aspx" title="Overview">OverView</a>        
        <!-- sub menu -->
              <ol>     
                <li><a href="Technical-Info.aspx" title="Technical Info">Technical Info</a></li>
                <li><a href="End-Device-Info.aspx" title="End Device Info">End Device Info</a></li>
              </ol>
        </li><!-- end sub menu -->        
        <li><a href="Register.aspx">Register To Service</a></li>
        <li><a href="Rates.aspx">Rates</a></li>              
        <li><a href="#">Support</a>        
              <!-- sub menu -->
              <ol>     
                <li><a href="page2.html" title="Page2">Page2</a></li>
                <li><a href="TOS.aspx" title="TOS">Terms Of Service</a></li>
                <li><a href="Contact_Us.aspx" title="Order the service">Contact Us</a></li>
              </ol>
        </li><!-- end sub menu -->        
        <li><a href="skype:nir2far?call" title="Call us on Skype">Skype</a></li>
    </ol>
jQuery-

<script>
$(document).ready(function(){
$('ol#menu li a').each(function(index, element) {
    var li = $(element).attr('href');
    $(element).parent().removeClass("active");   
   var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

    if(filename==li)
    {
            $(element).parents("li").addClass("active");
    }

});
});
</script>
该方法选择DOM树上所有匹配的父元素,您可以使用选择直接父元素和选择DOM树上第一个匹配的父元素

所以试试看

$(element).closest("ol").parent("li").addClass("active");
而不是

$(element).parents("li").addClass("active");
$(element).parents("li").addClass("active");
你必须使用

$(element).parent('li').parents('li').addClass("active");
而不是

$(element).parents("li").addClass("active");
$(element).parents("li").addClass("active");

你的主播“page2”在一个“li”中,所以这是它的直接父代。您必须访问'li'的父项。

$element.parentsli.addClassactive;应为父级而不是父级准备好尝试此操作后,将在不支持的第2页上添加活动类。如果在支持li上添加活动类,则所有li内容将接收红色背景。您应该在锚定标记中添加活动类。已尝试此操作,但不支持在第2页添加活动类。此操作无效。parent方法返回一个直接的父对象。第一个“li”没有直接的“li”作为父母@阿里菲克斯:请看我的答案。@FlavioEscobar如果树长得不理想,你的答案将激活树上的所有元素。。。