CSS - Menüpunkt aktiv markieren?

Birke

Birke

Aktives Mitglied
Thread Starter
Dabei seit
01.11.2007
Beiträge
4.089
Reaktionspunkte
158
Hi!

Ich bastel gerade an einer Seite, deren Inhalte in einzelnen DIVs liegen. Daher gibt es nur eine einzige HTML-Seite, die nicht neu geladen wird. Das Menü habe ich als Liste angelegt.

Wie kann ich nun die einzelnen Menüpunkte aktiv markieren? CSS mit :active hilft mir ja hier nicht weiter.

Wird wohl nur mit JScript zu lösen sein. Oder?

Gruß, Birke
 
*verschieb*
 
Hüstl* Wieso nicht im Subforum Web-Programmierung? Mir geht es doch nicht um eine Gestaltungsfrage ... :kopfkratz:

Unter Webpage-Design, verstehe ich Fragen zur Gestaltung, Layout etc.
 
Na gut. :shame:

Aber was visibility damit zu tun haben soll, ist mir etwas schleierhaft, denn es geht mir um eine Liste, nicht um einen Layer. Und ich möchte auch nicht die gesamte Liste tauschen, sondern nur den Text fett markieren.
 
Du kannst nat. stattdessen auch die Farbe ändern, oder die Schriftart, oder ...
 
Ach so! Du meinst ich kann mit ...

window.document.ElementeRhabarber ...
Zum Vergrößern anklicken....

das <li> Element über seine ID ansprechen und ändern?
 
genau! Du kannst alle Eigenschaften über den DOM-Baum ansprechen und bei beliebigen Aktionen ( onCLick, OnMouseover,...) ändern :jaja:
 
  • Gefällt mir
Reaktionen: Birke
Danke wegus!

Hab nur seit ca. 1998 keine Webseiten mehr erstellt und ich merke ich werde langsam alt ... ;)
 
Danke! :p
 
Eine Frage hätte ich noch:

Jetzt ist es aber so, dass ich zwar mit onclick das CSS ändern kann, doch wenn der Klick ausgeführt wurde, wird wieder das ursprüngliche CSS angezeigt. Ich hätte es aber gerne so, dass es dauerhaft bleibt.
 
Ich hab Dir mal schnell ein jQuery-Beispiel hingewurstet. 8 Zeilen Code:
Code: 
$(document).ready(function(){
   $("#navigation a").click(function() {
      $("#navigation a").each(function() {
         $(this).removeClass("active");
      });
      $(this).addClass("active");
   });
});
Bedingung dafür ist dass Du jQuery einbindest.

Hier das Live-Beispiel: http://tmp.schroeder-daniel.de/menuactive.html
 
  • Gefällt mir
Reaktionen: Birke
jQuery kenn ich zwar noch nicht, wird aber wohl was wie die Mootools sein. Ich schaue mir das mal an. Danke dms! :)

Das Beispiel schaut schon sehr viel versprechend aus!
 
Weißt Du zufällig, wieso es nicht mehr funktioniert, wenn ich die <ul> in einem <div> habe? Ich habe mal die ID des DIVs in das JScript integriert, geht aber nicht.

Code: 
         $(document).ready(function(){
            $("#[COLOR="YellowGreen"]Test[/COLOR].[COLOR="orange"]navigation[/COLOR] a").click(function() {
               $("#[COLOR="YellowGreen"]Test[/COLOR].[COLOR="orange"]navigation[/COLOR] a").each(function() {
                  $(this).removeClass("active");
               });
               $(this).addClass("active");
            });
         });

Code: 
<div id="[COLOR="YellowGreen"]Test[/COLOR]">
      <ul id="[COLOR="Orange"]navigation[/COLOR]">
         <li><a href="#">Menüpunkt 1</a></li>
         <li><a href="#">Menüpunkt 2</a></li>
         <li><a href="#">Menüpunkt 3</a></li>
         <li><a href="#">Menüpunkt 4</a></li>
         <li><a href="#">Menüpunkt 5</a></li>
      </ul>
</div>
 
Du darfst Klassen nicht mit ID's verwechseln. :)

#Test #navigation a
 
OhGott!* :faint: :shame:
 
Hmpf* Irgendwie scheint sich das Google-Framework mit den Mootools nicht zu vertragen, denn die Funktionalität der MooTools Skripte ist nun dahin. Schade, denn das wäre eine feine Lösung gewesen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten