动态设置导航栏中的活动类答案

【问题标题】：Set Active class in Navbar Dynamically动态设置导航栏中的活动类
【发布时间】：2015-12-02 03:12:28
【问题描述】：

最初我有一个引导导航栏，我将导航栏代码硬编码到我的每个 html 文件中。我手动设置用户当前正在查看的任何页面的选项卡的活动类，如下所示：

    <ul class="nav navbar-nav">
      <li class="active"><a href="homepage.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="map.html">View Map</a></li>
      <li><a href="index.html">Submit Document</a><li>
      <li><a href="contact.html">Contact</a></li>
    </ul>

这很好用，但我意识到重复这样的代码是不好的做法，所以我将导航栏代码放在一个单独的文件中，将我所有的 html 文件转换为 php 文件，并使用 php include 语句加载导航栏在每一页。然后我使用 JavaScript 尝试动态设置活动类。但是，单击我的选项卡时，我根本无法显示活动类。

<head>
    <link href="../css/navbar.css" type="text/css" rel="stylesheet" />
</head>

<!-- JAVASCRIPT TO TOGGLE ACTIVE CLASS-->
<script type="text/javascript">
  $(".nav a").on("click", function(){
  $(".nav").find(".active").removeClass("active");
  $(this).parent().addClass("active");
  });
</script>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
  <div class="navbar-header">
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <!-- Mobile collapse-->
        <span class="icon icon-bar"></span>
        <span class="icon icon-bar"></span>
        <span class="icon icon-bar"></span>
    </button>
    <a class="navbar-brand" href="homepage.html">
      <img src="../images/pksoilogo.png" id="logo">
    </a>
  </div>
  <div class="collapse navbar-collapse"> <!-- Mobile collapse/Dropdown-->
    <ul class="nav navbar-nav">
      <li><a href="homepage.php">Home</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="map.php">View Map</a></li>
      <li><a href="index.php">Submit Document</a><li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
  </div>
</div>
</nav>

关于如何更正 JavaScript 以解决此问题的任何想法？

【问题讨论】：

标签： php include navbar

【解决方案1】：

编辑 - 抱歉，我没有阅读关于您想要修复 Javascript 的部分。希望有人能尽快为您的问题提供 JS 解决方案！

这是解决问题的一种方法。

<ul class="nav navbar-nav">
  <li <?php if (basename($_SERVER['PHP_SELF']) == 'homepage.php') echo 'class="active"' ?>><a href="homepage.php">Home</a></li>
  <li <?php if (basename($_SERVER['PHP_SELF']) == 'about.php') echo 'class="active"' ?>><a href="about.php">About</a></li>
  <li <?php if (basename($_SERVER['PHP_SELF']) == 'map.php') echo 'class="active"' ?>><a href="map.php">View Map</a></li>
  <li <?php if (basename($_SERVER['PHP_SELF']) == 'index.php') echo 'class="active"' ?>><a href="index.php">Submit Document</a></li>
  <li <?php if (basename($_SERVER['PHP_SELF']) == 'contact.php') echo 'class="active"' ?>><a href="contact.php">Contact</a></li>
</ul>

显然这不是最干净的方法，但它很容易。您还可以创建一个可以调用的函数以使其看起来更好。

【讨论】：