javascript - 选择新元素时如何更改事件的 元素？

Question

我正在处理一个 ASP .NET 元素，我在页面的一侧有一个导航栏。

<div class="navbar-inverse" role="navigation">
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav side-nav">
            <li class="active">@Html.ActionLink("Dashboard", "Index", "Home", null, null)</li>
            <li>@Html.ActionLink("Marketing", "Marketing", "Home", null, null)</li>
            <li>@Html.ActionLink("Sales Overview", "SalesOverview", "Home", null, null)</li>
        </ul>
    </div> 
</div>

事件元素当然是第一个。在导航栏上，这意味着该特定选择比其他选择稍微暗一些。当我单击 navbar 中的不同选择时, 但是，这仍然是积极的行动。我是 html 的新手，我想到的解决方案是分配每个 <li>一个id和 onclick然后编写一些 javascript 将该 id 的类更改为在单击时激活。

这似乎是一种迂回的方式来做一些应该包含在 <ul> 中的事情。 .所以我的问题是是否有一种更简单的方法可以更好地扩展(这里的意思是，我可能会向导航栏添加更多的东西，我不希望每个东西都有一个 onclick 方法)。

以上代码在Shared/~Layout中，顺便说一句，不像为每个页面定义单独但相似的 View 那么简单，这个 View 实际上需要以某种方式更新。

Answer 1

如果你会使用 jQuery，那么试试这个:

$(document).ready(function(){
    var $lis=$('.nav li');
    $lis.click(function(){
        $lis.removeClass('active');
        $(this).addClass('active');
    });
});

//更新

$(document).ready(function(){
var pathname = window.location.pathname;        
var $lis=$('.nav li');
        $lis.click(function(){
           $this = $(this);
            if (pathname == $this.find('a').attr('href')) {
                $lis.removeClass('active');
                $this.addClass('active');
            }
        });
    });