Navigationsmenü mit CSS und Javascript Onclick steuern

Tigana2009

Hallo zusammen,

ich habe versucht bei der Gestalltung eines Navigationsmenüs die CSS-Pseudoklassen zu verwenden, damit dass der ausgewählte Menüpunkt hevorgehoben wird [a:focus { color: orange; text-decoration: underline; font-weight: bold;}] dazu habe ich die folgenden Befehle verwendet:
a:focus[href]:before {content: '[';}
a:focus[href]:after {content: ']';})
um mit eckigen Klammern hervorzuheben, leider wirkt die Hervorhebung des jeweils aktiven Bereichs nur solange dieser Bereich den Focus hat. Beim Wechsel bei einem Mausklick auf der Seite, wird der vorherige Zustand wieder hergestellt.
Hat jemand eine Idee, wie ich dieses Problem lösen kann??

Vielen Dank im Voraus.

djheke

Etwas genauer bitte. http://www.gipspferd.de/forumhilfe/akt…t-css/index.htm

http://www.gipspferd.de/forumhilfe/akt…t-css/index.htm

mr.gnom

HTML

<style>


   .focus{ font-weight:bold;color: red;}


</style>


.......




<nav>
   <a class="btn" id="btnA" href="#" onclick="next('#content1','#btnA');">Seite1</a>
   <a class="btn" id="btnB" href="#" onclick="next('#content2','#btnB');">Seite2</a>
</nav>


<div class="main" id="content1"></div>
<div class="main" id="content2"></div>

Alles anzeigen

js:

Code

$(document).ready(function(){


   $(".main").hide();
   $("#content1").show();


});


function next(wert,wert2)
{
$(".main").hide();
$(wert).show();


$(".btn").removeClass("focus");
$(wert2).addClass("focus");
}

Alles anzeigen

Nur werde ich immer wieder mit der Frage konfrontiert: "Und was wenn der User js ausgeschaltet hat ?". Also sollte man dieses evtl erstmal in PHP lösen und dem User über nen Hyperlink die Option geben auf http://index2.html/php zu springen wo js existent ist.

mr.gnom

Du kannst noch in die document.ready mit eintragen:

Code

$("#btnA").addClass("focus");

so hast Du beim Seitenstart gleich den ersten link mit class focus

djheke

Funktioniert doch alles! FF O GC

Navigationsmenü mit CSS und Javascript Onclick steuern

Tags

Benutzer online in diesem Thema