javascript активный класс другого цвета на конкретной странице

1

Как я могу сделать класс ".active" другим цветом, который будет определен по названию страницы; например ".active_index" и наведите цвет всех ссылок в ".navbar" будет таким же, как ".active_index"? Я использую include php option для заголовка (include ('header.php');). Вот мой код:

HTML-код

<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

if (pageName == 'index.php') {
    active_index.setAttribute(color, red);
}
  • 0
    Если вы хотите сделать это в js, то вам придется взять URL, а затем проанализировать его, чтобы вы могли получить имя страницы. При добавлении активного класса просто прикрепите имя страницы в конце. В css определите классы для каждой страницы, чтобы цвет был другим
  • 0
    @Huangism Huangism Я постараюсь сделать это.
Показать ещё 7 комментариев
Теги:
navbar

1 ответ

-1
Лучший ответ

Возможно, PHP-логика может быть улучшена, но вот идея...

Сначала используйте PHP для получения URI запроса HTTP и добавьте класс в <html> или <body>. (например, <html class="index-page"> Затем используйте этот класс в селекторе CSS, который применяется как к активным, так и зависающим элементам списка (например .index-page.navbar a:hover и .index-page.navbar li.active > a). Наконец, примените свой active класс в файле header.php - опять же, используя URI-запрос HTTP.

page.php

<?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'); ?>
  ...

style.css

.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; }

...

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

Кроме того, вы можете использовать стили, связанные с страницей, в своих собственных файлах CSS. Это можно разместить под файлом CSS по умолчанию, чтобы переопределить/настроить стили страниц по умолчанию. Опять же, здесь можно улучшить PHP-логику, но вы можете сделать это, например...

<head>
  ...
  <link href="default.css" rel="stylesheet">
  <?php if ($_SERVER['REQUEST_URI'] === '/') { // this is "index.php" ?>
    <link href="index.css" rel="stylesheet">
  <?php } elseif ($_SERVER['REQUEST_URI'] === '/zeolit.php') { ?>
    <link href="zeolit.css" rel="stylesheet">
  <?php } ?>
  ...
</head>
Поделиться
  • 2
    Или вы можете просто добавить класс к телу на основе страницы и объявить все стили в глобальной или общей таблице стилей
  • 0
    @ Huangism Да. Спасибо за добавление этого!
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню