Menüpunkt markiert zu lassen

Webdesign & Technik HTML & CSS
1

Hallo,
Ja, schon wieder ich :frowning: Sorry.

Also neues Problem:
Ich möchte einen Menüpunkt in einem CSS-Style markiert LASSEN und die anderen natürlich „entmarkieren“.

Ich habe jetzt stundenlang gesucht und nur einen (minimalen) Teil rausgefunden, der mich kaum näher meiner Lösung bringen dürfte:

Das Menü selbst z.B. mehrere Punkte:


Home



Testseite

Das funktioniert auch, aber leider wird immer nur der erste markiert. Natürlich denkt ihr nun, ja haben alle diesselben id-Namen. Ja, klar, das ist ja der Sinn dahinter, dass gleich aussehen. Nur frage ich mich zwei Sachen:

  • Warum werden nicht alle markiert, wenn doch alle dieselben IDs haben.
  • Warum „weiß“ der Computer nicht, welches Element ich angeklickt habe. Wenn ich testseite anklicke, ist ja klar, dass ich nicht Home ändern möchte :susp:

Ich würde (vermutlich) eine Lösung kennen: Wenn man die ids auf Button1 und Button2 umbenennt, dann könnte man einfach im CSS eine Liste machen, also statt:
#logo #menu #button.active a
dann
#logo #menu #button1.active a , #logo #menu #button2.active a usw.

Aber das ist ja mehr als nervig wenn man mehrere Menüpunkte hat.

Dazu kommt ja noch, dass die alten de-markiert werden sollen, d.h. ich müsste jeden ansprechen und auf „nichts“ setzen, damit „active“ wieder weg ist.

Geht das nicht irgendwie einfacher? Das kann ja nicht sein. Habe jetzt Stunden gesucht und noch immer NICHTS brauchbares gefunden. Und nein, ich möchte keine statischen Seiten, sondern es soll so bleiben und nur ein iframe ersetzt werden beim klick auf einen Button. Da wäre es nett, wenn wenigstens das Menü klappen würde :frowning:

Große Verzweiflung schön langsam :frowning: Der große Tatendrang weicht schon dem Frust -.-
Danke für alle Tipps oder Beispiele
scacom

2

Das Stück Quelltext ist eine Katastrophe - wo treibst du nur imme solch wirres Zeug auf?

‘javascript:’ gehört nicht in ein Attribut href von a.
Wenn man sowas aus dekorativen Gründen braucht, kommt in das href die URI der Zielsteite
des Verweises rein oder der Fragmentidentifizierer, der angesprungen werden soll.

Ansonsten, wenn man etwa einen Verweis anders dekorieren will, wenn der gerade aktiv ist,
so kann man dafür die CSS-Pseudoklasse ‘:active’ verwenden, ähnlich wie man auch ':hover’
verwendet, damit sich die Dekoration ändert, falls ein Zeigergerät drüber ist.
Wenn die Zieldatei in einem iframe angezeigt werden soll, sollte das Element im verweisenden
Dokument zumindest so lange aktiv bleiben, bis man darin etwas anderes aktiviert.

Also etwa in der Stilvorlage notieren:
a:active { color: #f80 }
macht das a-Element dann orange

Bei moderneren Projekte, die ohne iframe arbeiten, sondern den Inhalt einfach per PHP
zusammensetzen, wird man hingegen eher analysieren, auf welcher Seite man ist oder was
man eingebunden hat und vor der Ausgabe in dem Menü den Verweis auf die aktuelle Seite
etwa durch ein Element span, b oder strong ersetzen, weil Verweise auf die aktuelle Seite
ohne zusätzlich angehängte Parameter keinen Sinn ergeben. Solch ein per PHP ausgetauschtes
Element kann man dann natürlich auch per CSS beliebig dekorieren.

3

Hallo scacom,
hoffe der Beitrag von hoffman konnte dir bereits weiterhelfen.
Ansonsten ist aber noch hinzuzufügen, dass man eine ID idR nicht an mehrere Elemente verteilen sollte.

Falls man mehrere Elemente haben, die gleichzeitig verändert werden sollen benutzt man dann eine Klasse (class=„button“).

In Javascript kannst du dann „getElementByClass“ statt „getElementByID“ benutzen.
In CSS heißt es dann .button statt #button. :slight_smile:

Ansonsten wünsche ich dir noch nen schönen Tag und hoffe dass dein Problem gelöst wurde.

Mfg
Tim :wink:

4

Hallo,

‚javascript:‘ gehört nicht in ein Attribut href von a.

Habe das wo gefunden und es funktionierte - also nahm ich es.
Aber hier muss ja dann z.B.: hraf=„home.php“ target=„Inhalt“ (iframe-Name) rein.

Wäre es besser es so zu machen:
onclick=„'JavaScript()“?

Zum Rest:
Ich habe es hinbekommen, dass die IDs beim Button zu Class werden. Ich habe individuelle (einzigartige) IDs vergeben.

Das sieht jetzt so aus:
Home
Seite1

usw. bis Seite 6

Und die Funktion:
function ButtonActive(id_active){

switch (id_active) {
case „home“:

document.getElementById(id_active).className = "buttonactive";
document.getElementById('seite1').className = "button";
document.getElementById('seite2').className = "button";
document.getElementById('seite3').className = "button";
document.getElementById('seite4').className = "button";
document.getElementById('seite5').className = "button";
break;

case „seite1“:

document.getElementById(id_active).className = "buttonactive";
document.getElementById('home').className = "button";
document.getElementById('seite2').className = "button";
document.getElementById('seite3').className = "button";
document.getElementById('seite4').className = "button";
document.getElementById('seite5').className = "button";
break;

Macht nun das angeklickte aktiv und setzt die anderen zurück.

Ich denke, nun passt das?
Ist zwar etwas mühsam, aber besser wird’s kaum gehen?!?!?

Zumindest funktioniert es. Eure Meinung? Passt oder Murks?

5

Hi,
arbeitest du in diesem Projekt mit frames? Wenn das nicht der Fall ist, kann man dieses

document.getElementById('seite1').className = "button";
document.getElementById('seite2').className = "button";
document.getElementById('seite3').className = "button";
document.getElementById('seite4').className = "button";
document.getElementById('seite5').className = "button";

weglassen, denn bei dem reload der Seite wird durch

<a href="home.php" id="home" target="inhalt" onclick="javascript:ButtonActive('home')" [color=#0000FF]class="button" [/color]>Home</a>
<a href="seite1.php" id="buch" target="inhalt" onclick="javascript:ButtonActive('seite1')" [color=#0000FF]class="button" [/color]>Seite1</a>

die Klasse bei jedem Menüpunkt sowieso wieder auf “button” gesetzt.
Außerdem kannst du bei dem onclick="" das javascript: weglassen.

Das sieht dann ungefähr so aus (Javascript):

function ButtonActive(id_active) { document.getElementById(id_active).className = "buttonactive"; }

Ich hoffe ich hab da jetzt nicht irgendeinen blöden Denkfehler drinne :smiley:

LG