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中，所以不像为每个页面定义单独但相似的视图那么简单，这个视图需要以某种方式实际更新。

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

Answer 2

我使用包含以下帮助程序扩展名的BootstrapSupport.HtmlHelperExtensions来处理菜单链接。

public static MvcHtmlString MenuLink(this HtmlHelper helper, string linkText, string actionName, string controllerName)
{
    var currentAction = helper.ViewContext.RouteData.GetRequiredString("action");
    var currentController = helper.ViewContext.RouteData.GetRequiredString("controller");
    var builder = new TagBuilder("li")
    {
        InnerHtml = helper.ActionLink(linkText, actionName, controllerName).ToHtmlString()
    };
    if (controllerName == currentController && actionName == currentAction)
    {
        builder.AddCssClass("active");
    }
    return new MvcHtmlString(builder.ToString());
}

这使我的菜单如下：

<div class="collapse navbar-collapse" id="app-navbar-collapse">
    <ul class="nav navbar-nav">
        @Html.MenuLink("Home", "Index", "Home")
        @Html.MenuLink("Schedule", "Schedule", "Home")
        <li><a href="#">Results</a></li>
        @Html.MenuLink("Admin", "Index", "Admin")
    </ul>
</div>

Answer 3

我提出了一个非常简单且不太难以扩展的解决方案。在我将拥有的操作链接引用的每个Controller方法中：

public ActionResult Index()
{
     ViewBag.Index="active";
     return View();
}

同样适用于所有其他的。然后在视图中：

<li class=@ViewBag.Index>...
<li class=@ViewBag.Marketing>...

由于所有其他的都是空字符串，因此除了一个类之外没有分配任何类。

Answer 4

如果你仍然需要它，你可以使用jQuery来做到这一点

var list = $('.nav li');
list.change(function(){
    list.removeClass('active');
    $(this).addClass('active');    
});

如何在选择新元素时更改活动<li>元素？</li>

4 个答案: