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

Question

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

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

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navLink " href="userhome.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link navLink active" 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 中还有其他替代方案吗？

Answer 1

下面是一个使用 PHP 的示例，通过在每个页面上设置变量来检查您所在的页面。由于您看起来只有很少的页面，因此这应该对您有用。如有必要，我们还可以使用 URL：

在每个页面的顶部，先添加一个变量(php文件的第一行(，切换页面的名称。我将以pool页面为例：

<?php $current_page = 'pool' ?>

现在在您的nav.php：

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navLink <?php if ($current_page === 'home') echo 'active'; ?>" href="userhome.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link navLink <?php if ($current_page === 'pool') echo 'active'; ?>" href="pool.php">Pool</a>
</li>
<li class="nav-item">
<a class="nav-link navLink <?php if ($current_page === 'tickets') echo 'active'; ?>" href="tickets.php">Tickets</a>
</li>
<li class="nav-item">
<a class="nav-link navLink <?php if ($current_page === 'winners') echo 'active'; ?>" href="#">Winners</a>
</li>
</ul>

这样做是检查$current_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>

Answer 2

$_SERVER['PHP_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>

希望！你得到了答案 😊