Question

我在asp.net应用程序中使用Twitter引导程序，下面是我的导航栏代码：

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="../">MyApp</a>
                <ul class="nav">
                    <li class="active"><a href="../">Home</a></li>
                    <li><a href="../About.aspx">About us</a></li>
                    <li><a href="../ContactUs.aspx">Contact us</a></li>
                </ul>
            </div>
          </div>
        </div>

我想在每次链接到菜单项的页面上更改活动菜单项。我该怎么做？

Answer 1

使用JavaScript，您可以使用以下代码获取当前路径：

var currentPath = window.location.pathname;

并将活动类添加到当前项目中，如下所示：

$(".menu a[href='" + currentPath + "']").parent().addClass("active");

Answer 2

请看这里有一个很好的助手类：

http://chrisondotnet.com/2012/08/setting-active-link-twitter-bootstrap-navbar-aspnet-mvc/

Answer 3

@Toby Jones确实提出了一个好帮手方法。但是，有些人可能只想通过Controller选择菜单项，而其他人可能希望通过控制器和操作的组合来选择菜单项。托比提到的文章中提到的解决方案只涉及第二种情况。

图书馆TwitterBootstrapMvc涵盖两种情况，语法如下：

@using (var nav = Html.Bootstrap().Begin(new Nav().SetLinksActiveByControllerAndAction()))
{
    @nav.ActionLink("Link 1", MVC.Account.SomeAction())
    @nav.ActionLink("Link 2", "SomeOtherAction")
}

Mthod .SetLinksActiveByControllerAndAction()可以替换为适用于第一种情况的方法.SetLinksActiveByController()。

值得一提的是，DropDowns提供了相同的扩展方法：

@using (var dd = Html.Bootstrap().Begin(new DropDown("Some Trigger").SetLinksActiveByController()))
{
    @dd.ActionLink("Some link", "action")
}

在asp.net应用程序活动类中的Twitter bootstrap导航？

3 个答案: