Question

我有这个导航，但我似乎找不到将.active类添加到当前页面的解决方案。谁能在这帮助我？

<nav class="menu">
  <ul class="menu-ul navigation">
    <div class="menu-first">
      <li><a href="index.php"><span class="main-title">X-BIKES</span></a></li>
    </div>
    <div class="menu-second">
        <li><a href="index.php?page=events">Events</a></li>
        <?php if (empty($_SESSION['user'])): ?>
        <li><a href="index.php?page=login">Login</a></li>
        <li>/</li>
        <li><a href="index.php?page=register">Register</a></li>
      <?php else: ?>
        <li><a href="index.php?page=logout">Logout</a></li>

      <li class="menu-cart">
        <a href="index.php?page=cart">Cart (<?php
          if(empty($_SESSION['cart'])) {
            echo '0';
          }else {
            echo sizeof($_SESSION['cart']);
          };
      ?>)</a>
      </li>
      <?php endif; ?>
    </div>
  </ul>
</nav>

Answer 1

您可以使用$_GET：

<nav class="menu">
  <ul class="menu-ul navigation">
    <div class="menu-first">
      <li><a href="index.php"><span class="main-title">X-BIKES</span></a></li>
    </div>
    <div class="menu-second">
        <li class="<?php echo $_GET['page'] == "events" ? "active" : ""; ?>" ><a href="index.php?page=events">Events</a></li>
        <?php if (empty($_SESSION['user'])): ?>
        <li class="<?php echo $_GET['page'] == "login" ? "active" : ""; ?>"><a href="index.php?page=login">Login</a></li>
        <li>/</li>
        <li class="<?php echo $_GET['page'] == "register" ? "active" : ""; ?>"><a href="index.php?page=register">Register</a></li>
      <?php else: ?>
        <li class="<?php echo $_GET['page'] == "logout" ? "active" : ""; ?>"><a href="index.php?page=logout">Logout</a></li>

      <li class="menu-cart <?php echo $_GET['page'] == "cart" ? "active" : ""; ?>">
        <a href="index.php?page=cart">Cart (<?php
          if(empty($_SESSION['cart'])) {
            echo '0';
          }else {
            echo sizeof($_SESSION['cart']);
          };
      ?>)</a>
      </li>
      <?php endif; ?>
    </div>
  </ul>
</nav>

然后在CSS中，您可以更改链接颜色：

.navigation a {
  color: blue;
}

.navigation .active a {
  color: red;
}

Answer 2

使用您的page参数检查已点击的链接并相应地设置课程。

例如，您可以在脚本的开头写下这样的内容：

var page = $_GET['page'];

然后在你的代码中

<a href="index.php?page=events" <?php if (page == 'events') echo 'class="active"' ?>>Events</a>

希望这是正确的语法。我写了上一个PHP代码已经有一段时间了。

Answer 3

您可以使用$ _SERVER [＆＃39; PHP_SELF＆＃39;]获取当前页面

然后你将比较当前页面宽度你的链接并添加class .active如果它们等于

<nav class="menu">
<ul class="menu-ul navigation">
<div class="menu-first">
<li><a href="index.php"><span class="main-title">X-BIKES</span></a>
</li>
</div>
<div class="menu-second">
<li><a <?= $_SERVER['PHP_SELF'] == 'index.php?page=events' ? 
'class="active"' : '' ?> href="index.php?page=events">Events</a></li>
<?php if (empty($_SESSION['user'])): ?>
<li><a href="index.php?page=login">Login</a></li>
<li>/</li>
<li><a href="index.php?page=register">Register</a></li>
<?php else: ?>
<li><a href="index.php?page=logout">Logout</a></li>
<li class="menu-cart">
<a  <?= $_SERVER['PHP_SELF'] == 'index.php?page=cars' ? 
'class="active"' : '' ?> href="index.php?page=cart">Cart (<?php
if(empty($_SESSION['cart'])) {
echo '0';
}else {
echo sizeof($_SESSION['cart']);
};
?>)</a>
</li>
<?php endif; ?>
</div>
</ul>

Answer 4

当前页面的活动菜单，例如contact.php，about.php，我们可以像$ currentpage那样使用不同页面的不同值进行变量

$currentPage = 'contact'; // current page is contact

在标题部分中，如下所示

<ul class="nav">
    <li class="<?php if($currentPage =='contact'){echo 'active';}?>" ><a href="contact.php">Contact</a></li>
    <li class="<?php if($currentPage =='about'){echo 'active';}?>" ><a href="about.php">About</a></li>
</ul>

在当前页面上设置活动类

4 个答案: