时间戳

首页 > 解决方案 > 当我们从一个页面移动到另一个页面时，如何在 css 中更改相应的导航链接

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>

 <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 中还有其他替代方案吗？

标签： javascripthtmlcssdombootstrap-4

解决方案

这是一个使用 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>

推荐阅读