將“當前”類別添加/刪除到導航中的li

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");
});
});

使用. 當它們上有一個類，例如<div class="sel"> $('.sel')並使用#表示具有ID的元素時，通常在CSS中使用。

Answer 2

使用$("#nav > ul > li")代替$("#nav.ul.li") 。 jQuery選擇器使用與CSS相同的語法。 其他解決方案，例如$("#nav ul li")也會在您的<li>元素之一內部的unordered list puttes中添加/刪除類。