更改列表內錨點選項卡的類名稱

Question

我有一個小查詢。

<ul class="navigation">
        <li><a href="#home">Home<span class="ui_icon home"></span></a></li>
        <li><a href="#aboutus">About Us<span class="ui_icon aboutus"></span></a></li>
        <li><a href="#services">Services<span class="ui_icon services"></span></a></li>
        <li><a href="#gallery">Gallery<span class="ui_icon gallery"></span></a></li>
        <li><a href="#contactus">Contact Us<span class="ui_icon contactus"></span></a></li>
    </ul>

這段代碼是我從互聯網上獲得的，就像單擊，只是頁面滾動到下一個內容。 所選列表項將自動更新。 但是，當我嘗試在Asp.net主頁上實現此模板時，列表項不會得到更新。 那我該怎么辦？ 有什么建議嗎？

以下是模板提供的CSS默認值

ul.navigation a:hover, ul.navigation a.selected {
    color: #201f1b;
    background: url(../images/templatemo_menu_hover.png) no-repeat left;
}

Answer 1

如果要將selected的類設置為單擊的錨點並將其從其他錨點中刪除，請使用：

$('.navigation li a').click(function(e) {
    e.preventDefault();
    $('.navigation li a').removeClass('selected');
    $(this).addClass('selected');
})

小提琴演示

Answer 2

如果要使用“單擊”功能刪除並在元素上添加類，請嘗試以下代碼：

$(".navigation li a").on("click", function (event) {
    //prevents the browser from going to a new URL
        event.preventDefault();
    //removes selected class from all elements
        $('.navigation li a').removeClass('selected');
    //adds selected class to element you click
        $(this).addClass('selected');
});

我無權訪問您的圖片，因此我在CSS中使用了background-color參數

jsfiddle示例： http : //jsfiddle.net/9Jjud/