更改列表内锚点选项卡的类名称

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/