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

<强> Fiddle Demo

Answer 2

如果您想使用'on click'功能删除并添加元素类，请尝试以下代码：

$(".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/

更改列表中锚标记的类名

2 个答案: