0

最新のブートストラップを使用して、次のアイテムを含むナビゲーション バーを表示しています。

<div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul id="navigation" class="nav navbar-nav">
            <li class="nav_btns nav-selected"><a href="~/home/index">Home</a></li>
            <li class="nav_btns"><a href="~/manage/users">User</a></li>
            <li class="nav_btns"><a href="#">Document</a></li>
            <li class="nav_btns dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account <b class="caret"></b></a>
              <ul id="my-account-dropdown" class="dropdown-menu" role="menu">
                <li><a tabindex="-1" href="#edit-accountsetting" role="button" data-toggle="modal"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
                <li><a tabindex="-1" href="~/account/changepassword" role="button" data-toggle="modal"><span class="glyphicon glyphicon-lock"></span> Change password</a></li>
                <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-book"></span> Language</a></li>
                <li><a tabindex="-1" href="~/account/logout"><span class="glyphicon glyphicon-log-out"></span> Log out</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->

問題は、選択またはクリックされたアイテムを強調表示することです。私が知っているのは、選択したアイテムを強調表示するには、「nav-selected」アイテムにクラスを追加する必要があるということだけです。アイテムをクリックするたびに、ナビゲーションで選択されたクラスが実装されるようにするにはどうすればよいですか。このナビゲーションバーはマスターページにあります。しかし、ページを切り替えるたびに常にリロードしているようで、「navbar-selected」はデフォルトの項目に戻ります。これにjavascriptを使ってみました。

$(".nav_btns").click(function ()
{
    $(".nav_btns").removeClass();
    $(this).addClass("nav_btns navbar-selected")
});

何か案は？

4

1 に答える 1

1

PHP を使用して、各ページの一番上に変数を割り当てます。現在のページによって決定されるその変数の値。次に、メニューを含め、if ステートメントを使用して、現在のメニュー項目/リスト項目がアクティブかどうかを判断します。

変数：

含まれているphp: 

<ul class="nav sf-menu">
   <li class="menuItem <?php if($menulocation == "MenuItem1"){echo("nav_btns navbar-selected");}; ?>"><a href="index.php">MenuItem1</a></li>
   <li class="menuItem  <?php if($menulocation == "MenuItem2"){echo("nav_btns navbar-selected");}; ?>"><a href="login.php">MenuItem2</a></li>
    <li class="menuItem  <?php if($menulocation == "MenuItem3"){echo("nav_btns navbar-selected");}; ?>"><a href="help.php">MenuItem3</a>
 </ul>
于 2013-10-18T05:21:33.110 に答える