Question

我正在使用最新的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”项中添加一个类来突出显示所选项。每次单击某个项目时，如何实现导航选择的课程，我该如何实现。此导航栏位于母版页上。但它似乎总是重新加载eveytime我切换页面，“navbar-selected”回到默认项目。我试过在这上面使用javascript。

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

有什么想法吗？

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

Bootstrap 2.3.2导航栏选中的项目

1 个答案: