Question

我有一个导航栏，我想在其中添加一个类到当前页面的li标签，以便我可以添加css来显示您所在的页面。我尝试使用这个脚本：

<script>
$(function() {
        $("#nav.ul.li").click(function() {
        $("#nav.ul.li").removeClass("current");
        $(this).addClass("current");
    });
});
</script>

这是我用于导航栏的html：

    <nav id="nav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li>
                <a href="Events Calendar.html">Events Calender</a>
                <ul>
                    <li><a href="Rules and Regulations.html">Rules</a></li>
                    <li><a href="Facilities.html">Facilities</a></li>
                </ul>
            </li>
            <li><a href="Video Guides.html">Video Guides</a></li>
            <li><a href="Gallery.html">Gallery</a></li>
            <li><a href="Store.html">Store</a></li>
            <li><a href="FindUs.html">Where to find us</a></li>
            <li><a href="Contact Us.html">Contact Us</a></li>
            <li><a href="About Us.html">About Us</a></li>

        </ul>
    </nav>

但是这个脚本没有用，所以使用javascript / jquery在点击导航栏中的li标签上设置类的最佳方法是什么？

所有人都非常感谢！

Answer 1

删除#nav.ul.li中使用的点，并在它们之间放置空格：

$(function() {
$("#nav ul li").click(function() {//or #nav > ul > li for direct element
   $("#nav ul li").removeClass("current");
   $(this).addClass("current");
});
});

当你有.时，$('.sel')使用<div class="sel">，#使用{{1}}，使用{{1}}来获取通常在css中使用的ID的元素。

Answer 2

使用$("#nav > ul > li")代替$("#nav.ul.li")。 jQuery选择器使用与CSS相同的语法。像$("#nav ul li")这样的其他解决方案也会在unordered list元素中添加/删除<li>个puttes中的类。

在nav中向li添加/删除类“current”

2 个答案: