Question

这是我的导航栏代码，但活动状态不起作用。单击购物车时，它将保留在主页中，该主页在此HTML代码中设置为活动状态。这有什么问题？

<html lang="en"><head>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap/jquery.min.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="home.php">company</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="home.php"><i class="glyphicon glyphicon-home"></i><span>&nbsp;Home</span></a></li>
            <li><a href="all_categories.php"><i class="glyphicon glyphicon-pencil"></i><span>&nbsp;Order</span></a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="register.php"><i class="glyphicon glyphicon-registration-mark"></i><span>&nbsp;Register</span></a></li>
            <li><a href="login.php"><i class="glyphicon glyphicon-user"></i><span>&nbsp;Login</span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>



</body>
</html>

Answer 1

我假设您使用的是单页。通过使用jquery .addClass和.removeClass，您可以激活点击的li。查看 DEMO 以获得清晰的图片。

$(document).ready(function()
{
  $('ul.nav li a').click(function (e)
{
  $('ul.nav li.active').removeClass('active');
  $(this).parent('li').addClass('active');
});          
});

Navbar中的活动状态不起作用

1 个答案: