Tab bar estilo nav com jQuery

Question

Oi eu tenho tentado encontrar uma resposta para esta pergunta. Eu estou tentando criar uma barra de navegação usando jquery que utiliza sobreposições. Portanto, há um No estado, fora do estado, estado clicado por três diffrent guias / imagens.

exemplo: Início | Suporte | Sobre

O problme eu estou tendo é se o clicado / no estado para desligar a outra imagem / guia se ele já on / estado clicado era. O que mantém hapening é cada guia permanece ativo quando clicado em vez de alternar e desligar.

Aqui está o código

$(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);
    });


}); 

Qualquer ajuda seria apreciada. Eu sou novo para jquery e estou realmente tendo um tempo contato com isso.

Answer 1

Será que este trabalho para você?

<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

Tente CSS vez. Aqui está um artigo sobre a técnica Portas de correr:

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

Editar Veja como você poderia aplicar estado clique (assumindo que o seu HTML é válido):

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

E, assim certifique-se de definir a classe "selecionado" no seu CSS.

Answer 3

Em conjunto com o uso de imagens de fundo + CSS para a aparência das abas (como mencionado acima), sugiro que denotam seus diferentes estados de link usando classes e, em seguida, ajustar o seu CSS de lá. Por exemplo:.

<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.