Javascript 向导航中的li添加/删除“当前”类

我有一个导航栏，我想在其中添加一个类到当前页面的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标记时设置类的最佳方法是什么

---

非常感谢大家的帮助

删除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'for和use for元素，该元素具有您通常在css中使用的id。

使用$nav>ul>li而不是$nav.ul.li。jQuery选择器使用与CSS相同的语法。其他解决方案，如$nav ul li，也会在一个元素中添加/删除无序列表中的类。

。是一个类选择器，您在发布的代码中没有任何类。当页面导航时，当新页面加载时，类将不在那里…^同意，除非您使用的是模板系统，并且您的jquery在所有页面上都是静态代码，或者您正在创建spa