javascript active class在特定頁面上的不同顏色

如何使「.active」類具有不同的顏色，這將會通過頁面名稱具體指定;例如「.active_index」和「.navbar」中所有鏈接的懸停顏色將與「.active_index」相同？我使用頭文件包含php選項（include（'header.php'）;）。繼承人我的代碼：javascript active class在特定頁面上的不同顏色

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

來源

2017-06-29 L. Grgincic

如果你正在尋找這樣的js，那麼你將不得不抓住的網址，然後解析它，讓你可以獲取頁面名稱。添加活動類時，只需將頁面名稱附加到活動類別的末尾即可。在CSS中，爲每個頁面定義類，以便顏色不同 – Huangism

@Huangism我會盡力做到這一點。 –

如果你可以在php中獲取頁面名稱，它會容易得多。如果你可以做到這一點，那麼你只需要將頁面名稱作爲一個類添加到'body'中，然後根據主體類定義你的css hover類 – Huangism

-1

PHP的邏輯或許可以得到改善，但這裏是一個想法.. 。

首先，使用PHP獲取HTTP請求URI，並向<html>或<body>標籤添加一個類。。（前<html class="index-page">然後，使用類適用於主動和徘徊列表項（前.index-page .navbar a:hover和.index-page .navbar li.active > a）CSS選擇器最後，應用您active類在header.php文件 - 再次，使用HTTP請求的URI

。

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>

來源

2017-06-29 17:27:45 BDawg

或者您可以根據頁面添加一個類到正文，並在全局或常用樣式表中聲明所有樣式 – Huangism

@Huangism是的。感謝您的補充！ – BDawg

如果有充分的理由回答這個問題，我會很感激這個解釋。 – BDawg

javascript active class在特定頁面上的不同顏色

回答

相關問題