1

私はasp.netアプリケーションでTwitterブートストラップを使用しています.navbarのコードは以下のとおりです:

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

メニュー項目にリンクしているページにいるたびに、アクティブなメニュー項目を変更したいと考えています。どうすればいいですか？

4

3 に答える 3

5

JavaScript を使用すると、次のコードを使用して現在のパスを取得できます。

var currentPath = window.location.pathname;

次のようにアクティブなクラスを現在のアイテムに追加します。

$(".menu a[href='" + currentPath + "']").parent().addClass("active");
于 2012-08-18T09:58:01.593 に答える
2

@Toby Jones は確かに良いヘルパー メソッドを提案しています。ただし、コントローラーのみでメニュー項目を選択したい人もいれば、コントローラーとアクションの組み合わせでメニュー項目を選択したい人もいます。Toby が参照した記事に記載されているソリューションは、2 番目のシナリオのみを処理します。

ライブラリ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()

また、ドロップダウンでも同じ拡張メソッドを使用できることにも言及する価値があります。

@using (var dd = Html.Bootstrap().Begin(new DropDown("Some Trigger").SetLinksActiveByController()))
{
    @dd.ActionLink("Some link", "action")
}
于 2013-07-10T20:53:38.013 に答える
2

優れたヘルパー クラスについては、こちらを参照してください。

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

于 2012-11-14T11:00:23.900 に答える