Jquery的Tab風格導航欄

嗨，我一直在試圖找到這個問題的答案。我正在嘗試使用使用翻轉的jquery創建導航欄。因此，對於三個不同的標籤/圖像，存在開狀態，關狀態，單擊狀態。Jquery的Tab風格導航欄

示例：首頁|支持|關於

我遇到的問題是獲取點擊/打開狀態來關閉其他圖像/標籤，如果它已經處於/點擊狀態。保持開啓狀態的是每個選項卡在點擊時保持活動狀態，而不是切換到開啓狀態。

下面是代碼

$(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的新手，我真的很感動。

來源

2009-07-30 Rob

您是否嘗試過使用CSS進行翻滾？ – Jason 2009-07-30 19:19:52

我有，但我不能在不使用圖像的情況下滿足設計要求。 – Rob 2009-07-30 19:21:31

將這項工作的嗎？

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

來源

2009-07-30 19:47:28 tessa

嘗試使用CSS。下面是關於滑動門技術文章：

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

編輯這裏是你如何可以申請單擊狀態（假設你的HTML是有效的）：

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

而只是確保你定義在您的CSS「選擇」類。

來源

2009-07-30 19:24:16 Jason

結合使用背景圖像+ 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>

等等

來源

2009-07-30 19:31:32 skybondsor

Jquery的Tab風格導航欄

回答

相關問題