为什么我所有的导航栏链接上都是 class "active"？

Question

这是我的 navbar.php 文件

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="">Pointless?</a>
    </div>
    <ul class="nav navbar-nav">
<?php
$active = "";
$pages = array("/index.php","/music/index.php","/pong/index.php");
if ($_SERVER["SCRIPT_NAME"] == $pages[0]) {
    $active .= "active";
}
else if ($_SERVER["SCRIPT_NAME"] == $pages[1]) {
    $active .= "active";
}
else {
    $active = "";
}
echo "      <li class=\"$active\"><a href=\"/\">Home</a></li>\n      <li class=\"$active\"><a href=\"/music\">Music</a></li>\n      <li class=\"$active\"><a href=\"/pong\">Pong</a></li>";
?>
    </ul>
  </div>
</nav>

有谁知道为什么所有导航链接的属性都用 "active" 填充？因为我在 if 语句中添加了变量。

此外，对于 code/is 不必要的部分，我有什么需要更改的吗？

Answer 1

您在创建 li 之前将 $class 的值设置为 active。这就是为什么会这样。

您可以像这样更新您的代码。

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="">Pointless?</a>
    </div>
    <ul class="nav navbar-nav">
<?php $url = $_SERVER['REQUEST_URI']; ?>

<li class="<?php echo $url === '/test.php' ? 'active' : '' ?>"><a href="/">Home</a></li>
<li class="<?php echo $url === '/music/index.php' ? 'active' : '' ?>"><a href="music">Music</a></li>
<li class="<?php echo $url === '/pong/index.php' ? 'active' : '' ?>"><a href="pong">Pong</a></li>
    </ul>
  </div>
</nav>

为什么我所有的导航栏链接上都是 class "active"？

Why is the class "active" on all of my navbar links?

php

nav

navigationbar