• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Active Link bei Beitrag

M

michaelxxx

Neues Mitglied
Hallo,

ich bekomme eine Linkfarbe in CSS nicht hin und bräuchte bitte mal Eure Hilfe.

Und zwar habe ich z.B. einen Beitrag in der Kategorie "Barbados" in Wordpress mit folgender URL:
localhost/reiseberichte/barbados/schnorcheln-mit-schildkroeten-carlisle-bay

In der Sidebar habe ich eine Linkliste mit Ländernamen. Da ist unter anderem auch "Barbados" dabei. Da dieser Beitrag ja zu Barbados gehört, hätte ich gerne, dass der Link "Barbados" in der Linkliste beim Aufruf des Beitrags als active in einer anderen Farbe dargestellt wird. Wie mache ich das?

Ich kann die Linkliste mit den Ländernamen gesondert ansprechen und dachte ich muss es einfach so machen:

Code: 
a.widget-laenderliste:active {
    color: #999999
}

Aber so klappt es irgendwie nicht. Wie kann ich das denn machen?

Viele Grüße
Michael
 
Werbung:
Was heist gesondert ansprechen ?
Hast du am ende des Links dann sowas in der art stehen bla.de?#barbados
Falls ja könntest du auch Css target nutzen.
Besser wäre du zeigst und mal Link dann wäre es einfacher
 
Was heist gesondert ansprechen ?
Zum Vergrößern anklicken....
Die Linkliste mit den Ländern hat eine eigene CSS Klasse.

Hast du am ende des Links dann sowas in der art stehen bla.de?#barbados
Zum Vergrößern anklicken....
Die URL des Links habe ich doch oben geschrieben: localhost/reiseberichte/barbados/schnorcheln-mit-schildkroeten-carlisle-bay

Besser wäre du zeigst und mal Link dann wäre es einfacher
Zum Vergrößern anklicken....
Da ich die Seite gerade auf localhost entwickel kann ich keinen live Link zeigen.

Hier mal ein Screenshot. Vielleicht wird es dann klarer? Rchts den Link "Barbados" hätte ich in dem Fall (da der Beitrag sich in der Kategorie Barbados befindet) in einer anderen Farbe.

screenshot.jpg
 
Werbung:
Es könnte auch mit ein paar Zeilen PHP zu erzielen sein.
Die Idee:
Übermittel beim Aufrufen der Seite per $POST oder $GET die laufende Nummer des Links aus deiner Menüleiste (1bisX).
Lese den Wert auf der aufgerufen Seite aus, füge dann mit PHP ein Stylesheet in den <head> ein, in dem du für das :nth-child deines Menüs die gewünschten Formate definierst.
 
Danke für Eure Lösungsansätze. Ich hätte nicht gedacht, dass es doch so kompliziert ist :oops:
Hatte gehofft, das geht einfach über CSS. Das ist den Aufwand dann doch eher nicht wert.

Danke für Eure Hilfe.
 
hat wordpress nicht auf jeder seite eine eigene id im body stehen ?
Dann wäre das doch kein problem den eintrag auf der Seite zu makieren.

zb irgendwie so
CSS: 
#post-12  a.widget-laenderliste.active {
    color: #999999
}
 
Werbung:
Haben die Links in der Navigation eine id ?
Oder kannst du den eine Id geben zb id="link-12" ,an besten die gleiche Zahl wie die page id ?

Dann währe es mit Css nicht schwer, mußt aber für jede Seite ein kurzen Css Code erstellen.
Oder ein Javascript einbinden was die page id auslesen tut und dann den Link dazu einfärben tut.

Wie groß ist deine Code ?
Kannst du den mal posten oder ein Codpen fertig machen?
Dann kann man dir auch besser helfen
 
Haben die Links in der Navigation eine id ?
Zum Vergrößern anklicken....
Aktuell nicht.

Oder kannst du den eine Id geben zb id="link-12" ,an besten die gleiche Zahl wie die page id ?
Zum Vergrößern anklicken....
Klar, jedem Link eine eigene ID zu geben wäre kein Problem. Die gleiche Zahl wie die page ID ginge auch. Das würde dann so aussehen:

Die Kategorie "Barbados" aus meinem Screenshot oben hat folgende ID im body:
Code: 
<body class="archive category category-bahamas category-727...

Dem Barbados Link in der Sidebar könnte ich diese ID auch hinzufügen:
Code: 
<a class="widget-bundesland" id="727" href="http://localhost/reiseberichte/mittelamerika-karibik/barbados">Barbados</a><br>

Meinst Du das so?
 
Werbung:
Mit Javascript wäre es einfachsten.
Kommt drauf an was der TE möchte ?
@michaelxxx möchtest du eine reine Css Lösung oder ist Javascript auch Ok ?

Im body hast du keine Id nur Klassen.
aber das geht auch mit eindeutigen Klassen Namen.
Wenn ich jetzt von deinen Gezeigten Code ausgehe wäre meine Lösung mit Javascript so

Active Link bei Beitrag

Active Link bei Beitrag Hallo, ich bekomme eine Linkfarbe in CSS nicht hin und bräuchte bitte mal Eure Hilfe. Und zwar habe ich z.B. einen Beitrag in der Kategorie "Barbados" in Wordpress mit folgender URL: localhost/reiseberichte/barbados/schnorcheln-mit-schildkroeten-carlisle-bay In der...
basti1012.bplaced.net basti1012.bplaced.net
Könnte man noch vereinfachen,

Die angesprochene Url auslesen wäre auch einfach.
Auslesen und mit der Navigation vergleichen , und wenn ein Treffer da ist dann makieren.

Mit JS gibt es bestinmt noch andere möglichkeiten oder einfacheren Code.

Wenn Js nicht erwünscht ist ,
dann der Css Weg ,
der mit den deinen gepostet Code auch kein problem mehr wäre, nur halt etwas länger wenn es um 80 Seiten geht
 
Zuletzt bearbeitet:
Hi,

Danke für Eure Antworten.

Solange es nicht die Ladezeiten negativ beeinflusst und für alle Browser gleichermaßen kompatibel ist, wäre mir egal, ob mit CSS oder JS. Von JS habe ich aber so absolut gar keine Erfahrung ;)

Mein Problem: aktuell sind es 80 Kategorien. Da können natürlich auch immer wiede neue hinzukommen. Und das ist natürlich Fehleranfällig, wenn man immer auch den Code anpassen muss und man es vielleicht mal vergisst.

Wahrscheinlich ist es am sinnvollsten, wenn ich das Update der Seite erst mal online bringe. Dann kann man das etwas besser nachvollziehen.

Die angesprochene Url auslesen wäre auch einfach.
Auslesen und mit der Navigation vergleichen , und wenn ein Treffer da ist dann makieren.
Zum Vergrößern anklicken....

Das klingt generell gut. Aber wie? :)
 
Werbung:
Zb mit meinen Script , oder mit Url auslesen wäre deinen Kategorien Endlos erweiterbar.
Ob 80 oder 800 das ist kein problem.
Von der Performance sehe ich bei so einen Javascript kein großes problem.
Auch wäre das Javascript auf alle Browser anpassbar.
michaelxxx schrieb:
Wahrscheinlich ist es am sinnvollsten, wenn ich das Update der Seite erst mal online bringe. Dann kann man das etwas besser nachvollziehen.
Zum Vergrößern anklicken....

Das ist richtig , aber wenn von deinen Code aus post #1 ausgehen tut könnte man dir da schon ein Javascript schreiben
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben