Javascript 当我们从一个页面移动到另一个页面时，如何在css中对相应的导航链接进行更改

一种方法是将活动属性添加到我们所在页面的导航链接：

 <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link navLink active" href="userhome.php">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navLink" href="pool.php">Pool</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navLink" href="tickets.php">Tickets</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navLink" href="#">Winners</a>
          </li>
        </ul>

。。。等等

---

javascript或CSS中还有其他选择吗？

下面是一个使用PHP的示例，通过在每个页面上设置一个变量来检查您所处的页面。因为看起来你的页面很少，这应该适合你。如有必要，我们也可以使用URL：

在每个页面的顶部，在任何其他内容之前添加一个变量（php文件的第一行），切换页面名称。我将使用

池

页面作为示例：

<?php $current_page = 'pool' ?>

这样做的目的是检查

$current\u page

变量，如果它匹配，它会将活动类添加到

nav link

元素中

这里有一种不用在每页上设置变量的方法。这将把服务器返回的页面与当前文件名进行比较

<?php
    // Get the current page returned by the server.
    $current_page_uri = str_replace( '/', '', $_SERVER['REQUEST_URI'] );
    // Get the current file name
    $current_file = basename( $_SERVER['PHP_SELF'] );
    // Active class if current page uri and current file are the same
    $active = ( $current_page_uri === $current_file ) ? 'active' : '';
    ?>

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="userhome.php">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="pool.php">Pool</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="tickets.php">Tickets</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="#">Winners</a>
    </li>
</ul>

$\u服务器['PHP\u SELF']返回当前文件名

因此，我们可以使用它将链接的文件名与当前

您还可以添加额外的类名并提供自己的样式

<?php $curr = basename($_SERVER['PHP_SELF']); ?>
 <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link navLink <?php if($curr=="username.php") echo " active"; ?>" href="userhome.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navLink <?php if($curr=="pool.php") echo " active"; ?>" href="pool.php">Pool</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navLink <?php if($curr=="tickets.php") echo " active"; ?>" href="tickets.php">Tickets</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navLink <?php if($curr=="winners.php") echo " active"; ?>" href="winners.php">Winners</a>
      </li>
    </ul>

---

希望！你得到了答案，我想你是想突出显示当前页面的链接。对吗？您如何为导航呈现HTML？是否为手册，例如，手动构建每个页面？是的，我想突出显示当前页面链接。例如，如果我在主页上，说明主页的导航链接必须高亮显示，直到我切换到另一页。然后，无论我去哪一页，都必须突出显示，主页导航链接必须正常。我正在使用引导和PHP代码。如果我不是为了一个不同的页面一次又一次地写导航，而是写了一次，并通过PHP.HTML

我通过php调用代码：

，因此我需要一种方法，可以通过css或javascript突出显示导航链接。

<?php
    // Get the current page returned by the server.
    $current_page_uri = str_replace( '/', '', $_SERVER['REQUEST_URI'] );
    // Get the current file name
    $current_file = basename( $_SERVER['PHP_SELF'] );
    // Active class if current page uri and current file are the same
    $active = ( $current_page_uri === $current_file ) ? 'active' : '';
    ?>

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="userhome.php">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="pool.php">Pool</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="tickets.php">Tickets</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="#">Winners</a>
    </li>
</ul>

<?php $curr = basename($_SERVER['PHP_SELF']); ?>
 <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link navLink <?php if($curr=="username.php") echo " active"; ?>" href="userhome.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navLink <?php if($curr=="pool.php") echo " active"; ?>" href="pool.php">Pool</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navLink <?php if($curr=="tickets.php") echo " active"; ?>" href="tickets.php">Tickets</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navLink <?php if($curr=="winners.php") echo " active"; ?>" href="winners.php">Winners</a>
      </li>
    </ul>