wake-up-neo.net

Ändern Sie die Linkfarbe der aktuellen Seite mit CSS

Wie unterscheidet sich ein Stil für die aktuelle Seite von anderen? Ich möchte die Farben des Textes und des Hintergrunds vertauschen.

HTML:

<ul id="navigation">
    <li class="a"><a href="/">Home</a></li>
    <li class="b"><a href="theatre.php">Theatre</a></li>
    <li class="c"><a href="programming.php">Programming</a></li> 
</ul>

CSS:

li a{
    color:#A60500;
}

li a:hover{
    color:#640200;
    background-color:#000000;
}
40
Josh Curren

a:active: Wenn Sie auf den Link klicken und ihn gedrückt halten ( aktiv! ).
a:visited: wenn der Link bereits besucht wurde. 

Wenn Sie möchten, dass der der aktuellen Seite entsprechende Link markiert wird, können Sie einen bestimmten Stil für den Link definieren. 

.currentLink {
   color: #640200;
   background-color: #000000;
}

Fügen Sie diese neue Klasse nur der entsprechenden li (Verknüpfung) hinzu, entweder serverseitig oder clientseitig (mithilfe von JavaScript).

47
N 1.1

Mit jQuery können Sie die .each-Funktion verwenden, um die Links mit folgendem Code zu durchlaufen:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

Abhängig von Ihrer Seitenstruktur und den verwendeten Links müssen Sie möglicherweise die Auswahl von Links einschränken, z.

$("nav [href]").each ...

Wenn Sie URL-Parameter verwenden, müssen Sie diese möglicherweise entfernen:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

Auf diese Weise müssen Sie nicht jede Seite bearbeiten.

69
Taraman

Dies kann erreicht werden, ohne dass jede Seite einzeln geändert werden muss (eine 'aktuelle' Klasse wird einem bestimmten Link hinzugefügt), jedoch immer noch ohne JS oder ein serverseitiges Skript. Dies verwendet den: target Pseudo-Selektor, der darauf beruht, dass #someid in der Adressleiste erscheint.

<!DOCTYPE>
<html>
<head>
    <title>Some Title</title>
<style>
:target {
    background-color: yellow;
}
</style>
</head>
<body>
<ul>
    <li><a id="news" href="news.html#news">News</a></li>
    <li><a id="games" href="games.html#games">Games</a></li>
    <li><a id="science" href="science.html#science">Science</a></li>
</ul>
<h1>Stuff about science</h1>
<p>lorem ipsum blah blah</p>
</body>
</html>

Es gibt einige Einschränkungen:

  • Wenn die Seite nicht mit einem dieser Links navigiert wurde, ist sie nicht
  • Die IDs müssen oben auf der Seite angezeigt werden. Andernfalls springt die Seite __. etwas herunter, wenn sie besucht wird.

Solange Links auf diese Seiten die ID enthalten und sich die Navigationsleiste oben befindet, sollte dies kein Problem sein.


Bei anderen In-Page-Links (Lesezeichen) geht auch die Farbe verloren.

9
Andy G

JavaScript erledigt die Arbeit.

Rufen Sie alle Links im Dokument ab und vergleichen Sie ihre Referenz-URLs mit der URL des Dokuments. Wenn es eine Übereinstimmung gibt, fügen Sie diesem Link eine Klasse hinzu.

JavaScript

<script>
    currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
    currentLinks.forE‌​ach(function(link) {
        link.className += ' current-link')
    });
</script>

One Liner Version of Above

document.querySelectorAll('a[href="'+document.URL+'"]').forE‌​ach(function(elem){e‌​lem.className += ' current-link')});

CSS

.current-link {
    color:#baada7;
}

Weitere Hinweise

Taramans jQuery-Antwort oben durchsucht nur [href], die link-Tags und andere Tags als a zurückgibt, die auf dem href-Attribut basieren. Bei der Suche mit a[href='*https://urlofcurrentpage.com*'] werden nur die Links erfasst, die die Kriterien erfüllen und daher schneller laufen. 

Wenn Sie sich nicht auf die jQuery-Bibliothek verlassen müssen, ist eine JavaScript-Lösung von Vanilla definitiv der richtige Weg.

3
Govind Rai

a:link -> Definiert den Stil für nicht besuchte Links.

a:hover -> Definiert den Stil für schwebende Links.

Ein Link wird angezeigt, wenn der Mauszeiger darüber bewegt wird.

2
rekha_sri

Beste und einfachste Lösung: 

Legen Sie für jede Seite, für die Ihr Link die Farbe ändern soll, bis zum Umschalten die Farbe fest, setzen Sie in JEDER SEITE für das Attribut VISITED einen internen Stil und stellen Sie jede einzelne Klasse so ein, dass zwischen Links unterschieden wird, damit Sie die Funktion nicht aus Versehen anwenden. Wir werden Weiß als Beispiel verwenden:

<style type="text/css">
.link1 a:visited {color:#FFFFFF;text-decoration:none;} 
</style>

Für alle anderen Attribute wie LINK, ACTIVE und HOVER können Sie diese in Ihrer style.css beibehalten. Sie sollten dort auch BESUCHT für die Farbe angeben, zu der der Link zurückkehren soll, wenn Sie auf einen anderen Link klicken.

2
greg

Die Antwort von N 1.1 ist richtig. Außerdem habe ich eine kleine JavaScript-Funktion geschrieben, um den aktuellen Link aus einer Liste zu extrahieren. Dadurch sparen Sie sich die Mühe, jede Seite zu ändern, um den aktuellen Link zu erfahren.

<script type="text/javascript">

function getCurrentLinkFrom(links){

    var curPage = document.URL;
    curPage = curPage.substr(curPage.lastIndexOf("/")) ;

    links.each(function(){
        var linkPage = $(this).attr("href");
        linkPage = linkPage.substr(linkPage.lastIndexOf("/"));
        if (curPage == linkPage){
            return $(this);
        }
    });
};

$(document).ready(function(){
    var currentLink = getCurrentLinkFrom($("navbar a"));
    currentLink.addClass("current_link") ;
});
</script>
2
Alex

füge das hinzu! Auf Ihrer Seite, wo Sie die Farben ändern möchten, speichern Sie sie als .php 

<?php include("includes/navbar.php"); ?>

fügen Sie dann eine neue Datei in einem Include-Ordner hinzu.

includes/navbar.php

<div <?php //Using REQUEST_URI

$currentpage = $_SERVER['REQUEST_URI'];

if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
    echo " class=\"navbarorange/*the css class for your nav div*/\" ";
elseif(preg_match("/about/*or second page name*//i", $currentpage))
    echo " class=\"navbarpink\" ";
elseif(preg_match("/contact/* or edit 3rd page name*//i", $currentpage))
    echo " class=\"navbargreen\" ";?> >
</div>
2
webestdesigns

@Presto Danke! Deiner hat perfekt für mich gearbeitet, aber ich habe mir eine einfachere Version ausgedacht, um das Ändern der Umgebung zu sparen.

Fügen Sie dem gewünschten Linktext ein <span>-Tag hinzu, in dem die Klasse angegeben wird. (z. B. Home-Tag)

<nav id="top-menu">
    <ul>
        <li> <a href="home.html"><span class="currentLink">Home</span></a> </li>
        <li> <a href="about.html">About</a> </li>
        <li> <a href="cv.html">CV</a> </li>
        <li> <a href="photos.html">Photos</a> </li>
        <li> <a href="archive.html">Archive</a> </li>
        <li> <a href="contact.html">Contact</a></li>
    </ul>
</nav>

Bearbeiten Sie dann Ihr CSS entsprechend:

.currentLink {
    color:#baada7;
}
1
Rhianna
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>

<style type="text/css"><!--

.class1 A:link {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333;  border-bottom: 4px solid #333333;}

.class1 A:visited {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333;  border-bottom: 4px solid #333333;}

.class1 A:hover {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF;  border-bottom: 2px solid #0000FF;}

.class1 A:active {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF;  border-bottom: 2px solid #0000FF;}

#nav_menu .current {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #FF0000; border-right: 3px solid #FF0000; border-top: 2px solid #FF0000;  border-bottom: 2px solid #FF0000;}


a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:none;}

a:active {text-decoration:none;}

--></style>

</head>

<body style="background:#000000 url('...../images/bg.jpg') repeat-y top center fixed; width="100%" align="center">

<table style="table-layout:fixed; border:0px" width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center><tr>

<td style="background: url(...../images/menu_bg-menu.jpg) center no-repeat;" "border:0px" width="100%" height="100%" align="center" valign="middle">

<span class="class1" id="nav_menu">

<a href="http://Yourhomepage-url.com/" ***class="current"*** target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>&nbsp;&nbsp;Home&nbsp;&nbsp;</b></font></a>

&nbsp;&nbsp;

<a href="http://Yourhomepage-url.com/yourfaqspage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>&nbsp;&nbsp;FAQs page&nbsp;&nbsp;</b></font></a>

&nbsp;&nbsp;

<a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>&nbsp;&nbsp;About&nbsp;&nbsp;</b></font></a>

&nbsp;&nbsp;

<a href="http://Yourhomepage-url.com/yourcontactpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>&nbsp;&nbsp;Contact&nbsp;&nbsp;</b></font></a>
</span>

</td></tr></table></body></html>

Hinweis: Der Stil steht zwischen dem head-Tag (<head> .... </head>) und der Klasse = "class1" und die id = "nav_menu" im ie: (- <span class="class1" id="nav_menu"> -).

Das letzte Klassenattribut ( class = "current" ) wird dann in den Hyperlink-Code des Links auf der Seite eingefügt, dem der aktive aktuelle Link entsprechen soll.

Beispiel: Sie möchten, dass das Link-Register aktiv bleibt oder hervorgehoben wird, wenn die zugehörige Seite aktuell angezeigt wird. Wechseln Sie zu dieser Seite und platzieren Sie das Attribut class = "current" nach dem HTML-Code des Links. Nur auf der Seite, die dem Link entspricht. Wenn diese Seite angezeigt wird, bleibt die Registerkarte hervorgehoben oder hebt sich von den übrigen Registerkarten ab.

Für die Startseite gehe zur Startseite und platziere die Klasse darin. Beispiel: <a href="http://Yourhomepage-url.com/" class="current" target="_parent">

Für die About-Seite gehe zur About-Seite und platziere die Klasse darin. Beispiel: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">

Für die Kontaktseite gehe zur Kontaktseite und platziere die Klasse darin. Beispiel: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">

usw ......

Beachten Sie die obige Beispieltabelle oben: - Nehmen wir an, dies war die Startseite. Auf dieser Seite hat nur der Link-Link für die URL der Startseite die Klasse = "current".

Sorry für jeden bedeutungslosen Fehler, bin kein prof. Dies funktionierte jedoch für mich und wurde in fast allen getesteten Browsern angezeigt, einschließlich iPad und Smartphones. Ich hoffe, das hilft jemandem hier draußen, weil er sehr frustrierend ist und nicht kann. Ich hatte es versucht, also musste ich dazu kommen, und bisher ist es gut für mich.

1
Salaam

Sie brauchen jQuery nicht, um dies zu tun! Alles was Sie brauchen, ist ein winziges und sehr leichtes Vanilla-Javascript und eine CSS-Klasse (wie in allen Antworten oben):

  • Definieren Sie zunächst eine CSS-Klasse mit dem Namen current in Ihrem Stylesheet.

  • Fügen Sie anschließend das folgende reine JavaScript entweder in Ihrer vorhandenen JavaScript-Datei oder in einer separaten js-Skriptdatei hinzu (fügen Sie dem Kopf der Seiten jedoch einen Skript-Tageslink hinzu) oder fügen Sie es einfach in ein Skript-Tag vor dem schließenden body-Tag ein. In all diesen Fällen wird es trotzdem funktionieren.



    function highlightCurrent() {
         const curPage = document.URL;
         const links = document.getElementsByTagName('a');
         for (let link of links) {
           if (link.href == curPage) {
             link.classList.add("current");
           }
         }
       }


       document.onreadystatechange = () => {
         if (document.readyState === 'complete') {
           highlightCurrent()
         }
       };

Das 'href'-Attribut des aktuellen Links sollte der absolute Pfad sein, wie von document.URL angegeben (console.log, um sicherzustellen, dass es derselbe ist).

0
Mohsen Kadoura