0

我正在使用最新的 bootsrap 来显示带有以下项目的导航栏。

<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”项目添加一个类以突出显示所选项目。每次单击一个项目时，我如何才能实现导航选择的类。此导航栏位于母版页上。但似乎它总是在我切换页面时重新加载，并且“导航栏选择”正在回到默认项目。我尝试在此使用 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 回答