asp.net应用程序活动类中的Twitter引导程序导航

Twitter bootstrap nav in asp.net application active class?

本文关键字：Twitter 引导程序 导航 net 应用程序 活动 asp      更新时间：2023-09-26

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

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

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

var currentPath = window.location.pathname;

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

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

@Toby-Jones确实提出了一个很好的辅助方法。但是，有些人可能希望仅通过控制器选择菜单项，而另一些人可能希望通过控制器和操作的组合来选择菜单项。Toby引用的文章中提到的解决方案只考虑了第二种情况。

Library TwitterBootstrapMvc使用以下语法涵盖了这两种情况：

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

方法CCD_ 1可以由方法.SetLinksActiveByController()代替。

同样值得一提的是，DropDowns上也有相同的扩展方法：

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

请参阅此处以获得一个优秀的助手类：

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

相关文章：