Question

如何使“.active”类成为页面名称特定的不同颜色;例如“.active_index”和“.navbar”中所有链接的悬停颜色将与“.active_index”相同？我使用包含php选项的头文件（include（'header.php'）;）。继承我的代码：

HTML CODE

<nav>
<div class="navbar">
  <ul>
    <li id="pageIndex"><a href="index.php">Početna</a></li>
    <li id="pageZeolit"><a href="zeolit.php"><i class="fa fa-angle-down" aria-hidden="true"></i>Zeolit</a></li>
    <li id="pageIzodenko"><a href="izodeko.php"><i class="fa fa-angle-down" aria-hidden="true"></i></i>Izodeko</a></li>
    <li id="pageElektronika"><a href="elektronika.php"><i class="fa fa-angle-down" aria-hidden="true"></i></i>Elektronika</a></li>
    <li id="pageInformacije"><a href="informacije.php">O nama</a></li>
  </ul>
</div>

JAVASCRIPT CODE

if (pageName == 'index.php') {
    active_index.setAttribute(color, red);
}

Answer 1

PHP逻辑可能会有所改进，但这是一个想法......

首先，使用PHP获取HTTP请求URI，并将类添加到<html>或<body>标记。（例如<html class="index-page">然后，在CSS选择器中使用该类，该选择器适用于活动和悬停列表项（例如.index-page .navbar a:hover和.index-page .navbar li.active > a）。最后，应用您的{{1} active文件中的类 - 再次使用HTTP请求URI。

<强> page.php文件

header.php

<强>的style.css

<?php
  // Get $pageClass (ex. "index-page" or "zeolit-page")
  $uri = preg_replace('/^\//', '', $_SERVER['REQUEST_URI']);
  if(strlen($uri) === 0) { $uri = 'index.php'; }
  $pageClass = str_replace('.php', '-page', $uri);
?>

<!DOCTYPE html>
<html class="<?php echo $pageClass; ?>">
<head>
  ...
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <?php include('header.php'); ?>
  ...

<强>的header.php

.index-page .navbar a:hover,
.index-page .navbar li.active > a { color: white; }

.zeolit-page .navbar a:hover,
.zeolit-page .navbar li.active > a { color: green; }

...

或者，您可以在自己的CSS文件中使用特定于页面的样式。这可以放在默认CSS文件下面，以覆盖/自定义默认页面样式。同样，这里可以改进PHP逻辑，但是你可以这样做，例如......

<?php $activeClass = 'active'; ?>
<nav>
  <div class="navbar">
    <ul>
      <li class="<?php echo ($_SERVER['REQUEST_URI'] === '/index.php' ? $activeClass : '') ?>" id="pageIndex">
        <a href="index.php">Početna</a>
      </li>
      <li class="<?php echo ($_SERVER['REQUEST_URI'] === '/zeolit.php' ? $activeClass : '') ?>" id="pageZeolit">
        <a href="zeolit.php"><i class="fa fa-angle-down" aria-hidden="true"></i>Zeolit</a>
      </li>
      ...
    </ul>
  </div>
</nav>

javascript活动类在特定页面上的不同颜色

1 个答案: