javascript - 如何在 ASP .NET MVC 中使用 javascript 或 jquery 移动 html 元素中的类属性？

Question

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

这是我的代码:

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

Answer 1

使用 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 逻辑。