更改列表内锚标记的类名答案

【问题标题】：Change class name of anchor tab inside list更改列表内锚标记的类名
【发布时间】：2014-02-22 11:24:06
【问题描述】：

我有一个小问题。

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

【问题讨论】：

标签： javascript jquery asp.net css

【解决方案1】：

如果您想将selected 类设置为单击的锚点并将其从其他锚点中删除，请使用：

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

Fiddle Demo

【讨论】：

【解决方案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/

【讨论】：

发布与其他答案完全相同的答案有什么意义？