Tab style nav bar mit Jquery

Question

Hallo Ich habe versucht, eine Antwort auf diese Frage zu finden. Ich versuche, eine Navigationsleiste mit jQuery zu erstellen, die Rollover verwendet. Es gibt also einen Status "Ein", "Aus", "Klick" für drei verschiedene Tabs/Bilder.

Beispiel: Home | Unterstützung | Über

Das Problem, das ich habe, ist, den angeklickten/eingeschalteten Zustand zu erhalten, um das andere Bild/den anderen Tab auszuschalten, wenn es bereits auf/angeklickt war. Was weiter hapert, ist, dass jede Registerkarte aktiv bleibt, wenn sie geklickt wird, anstatt sie ein- und auszuschalten.

Hier ist der Code

$(document).ready(function() { 


    // Navigation rollovers 
    $("#nav a").mouseover(function(){ 
     imgsrc = $(this).children("img").attr("src"); 
     matches = imgsrc.match(/_on/); 

     // don't do the rollover if state is already ON 
     if (!matches) { 
     imgsrcON = imgsrc.replace(/_off.gif$/ig,"_on.gif"); // strip off extension 
     $(this).children("img").attr("src", imgsrcON); 
     } 

    }); 

     $("#nav a").click(function(){ 
     imgsrc = $(this).children("img").attr("src"); 
     matchesclk = imgsrc.match(/_clk/); 


     if (!matchesclk) { 
     imgsrcClkON = imgsrc.replace(/_on.gif$/ig,"_clk.gif"); // strip off extension 
     $(this).children("img").attr("src", imgsrcClkON); 
     } 

    }); 

    $("#nav a").mouseout(function(){ 
     $(this).children("img").attr("src", imgsrc); 
    }); 


}); 

Jede Hilfe würde geschätzt. Ich bin neu in JQuery und ich habe wirklich ein bisschen Zeit damit.

Answer 1

Wird diese Arbeit für Sie?

<style> 
    .click 
    { 
     background-image: url(images/click.png); 
    } 

    .over 
    { 
     background-image: url(images/over.png); 
    } 
</style> 


$(document).ready(function() 
{ 
    $("#nav a").mouseover(function() 
    { 
     if($(this).attr("class") != "click") 
      $(this).addClass("over"); 
    }); 

    $("#nav a").click(function() 
    { 
     $("#nav a.click").removeClass("click"); 
     $(this).addClass("click"); 
    }); 

    $("#nav a").mouseout(function() 
    { 
     $(this).removeClass("over"); 
    }); 

}); 



<div id="nav"> 
<a>One</a> 
<a>Tw0</a> 
<a>Three</a> 
</div> 

Answer 2

Versuchen Sie CSS stattdessen. Hier ist ein Artikel über die Schiebetüren Technik:

http://www.alistapart.com/articles/slidingdoors/

EDIT hier, wie Sie Zustand klicken anwenden könnten (Ihre HTML Annahme gültig ist):

$(".yourLink").cick(function() { 
    $(".yourLink").removeClass("selected"); 
    $(this).addClass("selected"); 
}); 

Und so stellen Sie sicher, dass Sie die definieren "ausgewählte" Klasse in Ihrem CSS.

Answer 3

In Verbindung mit der Verwendung von Hintergrundbildern + CSS für das Aussehen der Tabs (wie oben erwähnt), schlage ich vor, dass Sie Ihre verschiedenen Link-Zustände mit Klassen bezeichnen und dann Ihr CSS von dort anpassen. Z.B .:

<div id="nav"> 
    <a class="on" href="#">Link 1</a> 
    <a href="#">Link 1</a> 
    <a href="#">Link 1</a> 
    <a href="#">Link 1</a> 
    <a href="#">Link 1</a> 
</div> 

<style type="text/css"> 
    #nav a { color: blue; } 
    #nav a.on { color: red; } 
    #nav a.current { color: green; } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#nav a').hover(
      function(){ $(this).addClass('on'); }, 
      function(){ $(this).removeClass('on'); } 
     ); 
    }); 
</script> 

Etc.