Jqueryを使用したタブスタイルのナビゲーションバー

Question

こんにちは、私はこの質問に対する答えを見つけようとしています。私は、ロールオーバーを使用するjqueryを使用してナビゲーションバーを作成しようとしています。したがって、オン状態、オフ状態、クリックされた3つの異なるタブ/イメージの状態があります。

例： ホーム|サポート|約

私が持っているプロンプトは、すでにオン/クリックされている状態でクリック/オン状態になり、他のイメージ/タブをオフにしています。どんなことが起こっているかは、各タブがオンとオフを切り替えるのではなく、クリックされたときアクティブなままであることです。ここで

はコード

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


}); 

任意の助けをいただければ幸いです。私はjqueryを初めて使っており、実際にこれに触れる時間があります。

Answer 1

はあなたのために、この動作しますか？

<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

代わりにCSSを試してみてください。ここではスライドドア技術に関する記事です：

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

EDITは、ここでは、（あなたのHTMLが有効であると仮定して）状態をクリックして適用できる方法は次のとおりです。

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

そして、ちょうどあなたが定義しますあなたのCSSの "selected"クラス。

Answer 3

上記のタブの外観に背景画像+ CSSを併用すると、クラスを使用して異なるリンク状態を示し、そこでCSSを調整することをお勧めします。例えば：

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

等