Javascript aktive Klasse andere Farbe auf bestimmte Seite

Wie kann ich machen ".active" -Klasse unterschiedliche Farbe, die nach Seitennamen spezifisch sein wird; zum Beispiel ".active_index" und die Hover-Farbe aller Links in ".navbar" ist identisch mit ".active_index"? Ich verwende include php Option für Header (include ('header.php');). Heres mein Code:Javascript aktive Klasse andere Farbe auf bestimmte Seite

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

Quelle

2017-06-29 L. Grgincic

Wenn Sie dies in js suchen zu tun, dann werden Sie die URL greifen müssen und es dann so Sie analysieren kann den Seitennamen erhalten. Wenn Sie die aktive Klasse hinzufügen, fügen Sie einfach den Seitennamen an das Ende an. In css, definieren Sie die Klassen für jede Seite, so dass die Farbe anders ist – Huangism

@ Huangism Ich werde versuchen, das zu tun. –

Es wäre viel einfacher, wenn Sie den Seitennamen in PHP erhalten können. Wenn Sie das tun können, fügen Sie einfach den Seitennamen als eine Klasse zum Beispiel dem 'body' hinzu und definieren Ihre css hover Klasse basierend auf der body Klasse – Huangism

-1

Die PHP-Logik wahrscheinlich verbessert werden kann, aber hier ist eine Idee ..

Verwenden Sie zuerst PHP, um den HTTP-Anforderungs-URI abzurufen, und fügen Sie dem Tag oder <body> eine Klasse hinzu. ... (Ex <html class="index-page"> Verwenden Sie dann diese Klasse in einem CSS-Selektor, die sowohl aktives und schwebte Listenelement gilt (ex .index-page .navbar a:hover und .index-page .navbar li.active > a) Schließlich gilt Ihre active Klasse in der header.php Datei - wieder mit dem HTTP-Request-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>

Alternativ können Sie seitenspezifische Stile in ihre eigenen CSS-Dateien verwenden. Dies könnte unter einer Standard-CSS-Datei platziert werden, um die Standardseitenstile zu überschreiben/anzupassen. Auch hier kann die PHP-Logik hier verbessert werden, aber man könnte dies tun, zum Beispiel ...

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

Quelle

2017-06-29 17:27:45 BDawg

Oder Sie können nur eine Klasse zu Körper auf der Seite hinzufügen und alle Stile in einem globalen oder gemeinsamen Stylesheet – Huangism

@Huangism Yes deklarieren. Danke für das Hinzufügen! – BDawg

Wenn es einen guten Grund gibt, warum diese Antwort abgelehnt wurde, würde ich mich über die Erklärung freuen. – BDawg

Javascript aktive Klasse andere Farbe auf bestimmte Seite

Antwort

Verwandte Themen