Ergebnis 1 bis 5 von 5

Thema: Navigationsmenü mit CSS und Javascript Onclick steuern

  1. #1
    HTML Newbie
    Registriert seit
    09.06.2016
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Navigationsmenü mit CSS und Javascript Onclick steuern

    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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Navigationsmenü mit CSS und Javascript Onclick steuern

    Etwas genauer bitte.



    Geändert von djheke (10.06.2016 um 15:22 Uhr)

  3. #3
    Youngster
    Registriert seit
    15.06.2016
    Ort
    Celle
    Beiträge
    11
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Navigationsmenü mit CSS und Javascript Onclick steuern

    HTML-Code:
    <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>
    js:
    Code:
    $(document).ready(function(){
    
       $(".main").hide();
       $("#content1").show();
    
    });
    
    function next(wert,wert2)
    {
    $(".main").hide();
    $(wert).show();
    
    $(".btn").removeClass("focus");
    $(wert2).addClass("focus");
    }
    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 index2.html/php zu springen wo js existent ist.
    Geändert von mr.gnom (15.06.2016 um 14:06 Uhr) Grund: sry kleiner tippfehler bei functions aufruf, nu passt

  4. #4
    Youngster
    Registriert seit
    15.06.2016
    Ort
    Celle
    Beiträge
    11
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Navigationsmenü mit CSS und Javascript Onclick steuern

    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

  5. #5
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Navigationsmenü mit CSS und Javascript Onclick steuern

    Funktioniert doch alles! FF O GC

Ähnliche Themen

  1. Mit JavaScript Flashfilm steuern
    Von simmel123 im Forum Flash Forum
    Antworten: 12
    Letzter Beitrag: 27.11.2009, 20:49
  2. Javascript EventHandler onClick
    Von MrVega im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 12.05.2007, 01:57
  3. HTML per Javascript steuern
    Von carre im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 06.01.2007, 23:54
  4. javascript onclick problem
    Von BendOr im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 28.12.2006, 17:38
  5. Dropdown-Liste mit JavaScript steuern
    Von CaptainAlphabet im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 05.02.2005, 21:10

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •