Herstellerliste nach Klick farblich ändern

Hallo,

ich habe eine horizontale Liste aller Hersteller einer bestimmten Kategorie nebeneinander aufgeführt.

Beispiel:

Handelt es sich um die Kategorie Seifen, stehen dort alle Seifenhersteller, die ich anbiete.

Wohlgemerkt, die Hersteller habe ich in einem div-Element in "Kategorie Beschreibung" reingeschrieben: Im Admin --> Kategorie bearbeiten: Seifen

In der Liste stehen dann beispielsweise:

<div
<p>
Nivea - SOHO - Palmolive - Naturals
</p>
</div

Ich möchte nun, dass die Schriftfarbe des Herstellers hervorgehoben wird, der angeklickt wurde, also aktiv ist.

Hat man auf Palmolive geklickt, soll Palmolive zum Beispiel mit der Farbe grün hervorgehoben werden.

Mit einem kleinen JavaScript ist das kein Problem - solange die Hersteller keinen Link haben.

Sind die Hersteller jedoch gelinkt, was ja Sinn dieser Übung ist, wird die angeklickte Seite neu geladen, mit der Liste aller Seifenprodukte von Palmolive. Die Schrift Palmolive wird aber nicht mehr farblich hervorgehoben.

Das liegt daran, dass beim Neuladen der Seite die Information des CSS-Styles --> "activ" verloren geht. Das Style "activ" ( .activ{color:green;} ) wurde vom javaScript beim Anklicken gesetzt, geht aber, wie gesagt, durch den Neuaufbau der Seite verloren.

Wie kann man das verhindern? Webseitig über weiteren JavaScript-Code? Oder serverseitig über PHP/Session?

Oder gibt es im Shop schon ein solches Script, was ich nutzen kann, vielleicht dann mit kleinen Veränderungen die ich machen würde.

Eigentlich müsste es diese Funktion im Shopsystem schon geben denke ich. Diese farbliche Hinterlegung von Schrift oder Hintergrund hat man ja bei den Kategorien schon, oder auch bei den TABs, wobei bei den Tabs die Seite nicht komplett neu geladen wird. Ist in diesem Fall was anderes, hier wird nur der Tab eingespielt (Ajax wohl).

Kann mir da jemand helfen?

 

Ich habe die Lösung im Internet gefunden:

Code:

<style>
  /* Standard-Styling für Links */
  #hersteller_id a {
    color: #666666;
    text-decoration: none;
  }

  /* Styling für ausgewählten Linktext (z.B., schwarze Schrift) */
  #hersteller_id a.selected {
    color: #222222;
    text-decoration: underline;
  }
</style>

        ...

<script>
  // Funktion zum Hinzufügen von 'selected' Klasse zum ausgewählten Linktext
  function markSelectedLink() {
    var currentUrl = window.location.href;
    var links = document.querySelectorAll('#hersteller_id a');

    links.forEach(function(link) {
      if (currentUrl.indexOf(link.href) !== -1) {
        link.classList.add('selected');
      }
    });
  }

  // Event-Listener für das Laden der Seite
  document.addEventListener('DOMContentLoaded', function() {
    markSelectedLink();
  });
</script>