1

我的网页上有一个使用<ul>html 标签的菜单选择，它有三个<li>标签，在列表项上它有一个<a>标签。对于页面的第一次加载，我编写了一个带有 class 属性的列表项标记。现在，当我单击第二个锚标记并且还用于第三个列表项标记时，我想将该类属性从第一个列表项标记移动到第二个列表项标记。我的问题是如何在 ASP .NET MVC 3 中使用纯 JavaScript 或 jQuery 做到这一点？

这是我的代码：

<div id="menu">
    <ul>
        <li class="current_page_item">@Html.ActionLink("Index", "Index", "Home")</li>
        <li>@Html.ActionLink("Contact Us", "ContactUs", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>

    </ul>
</div>
4

1 回答 1

2

使用 jQuery：

$('#menu li').click(function(){
    $('.current_page_item').removeClass('current_page_item');
    $(this).addClass('current_page_item');
})

Javascript有点冗长，但同样的想法：

var listnodes = document.getElementById('menu').getElementsByTagName('li');
for(var i = 0; i < listnodes.length; i++){
    listnodes[i].addEventListener('click',function(){
        var listnodes = document.getElementsByClassName("current_page_item");
        for(var i = 0; i < listnodes.length; i++){
            listnodes[i].className = "";// this is not quite the same as removeClass
        }
        this.className = "current_page_item";
    });
}

内部循环是不必要的，因为在任何给定时间，该类只有一个列表项，但我想尽可能地复制 jQuery 逻辑。

于 2012-11-07T05:37:59.890 回答