CSS精靈菜單和jQuery addClass（）方法

我創建CSS精靈菜單基於此教程： http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/ 現在我想.selected類分配給它被點擊的最後一個「一」。我添加了sipmle腳本：CSS精靈菜單和jQuery addClass（）方法

<script> 
    $("a").click(function(){ 
     $(this).addClass("selected"); 
    }); 
</script>

但類.selected僅在加載頁面時出現。加載整頁菜單項後返回到其正常狀態。你能幫我解決這個問題嗎？ TIA

有一個愉快的一天:)

來源

2011-09-28 mkas

您是否試圖將代碼放在'$（document）.ready（function（）{// code here}）中;' – Marnix

不會點擊'a'將您帶到不同的頁面？ – Usman

@Usman是對的。當您點擊鏈接時，您將離開您的頁面。解決方案：製作一些額外的腳本功能，將「已選」類添加到剛加載的頁面。 – Marnix

點擊a會帶你到一個不同的頁面，所以這個事件是不會爲你工作。要selected類添加到您的代碼像下面的當前鏈接：

<script> 
$(function(){ //short form of $(document).ready(function(){ 
    $("a").each(function(){ 

     path=window.location; 
     path=String(path).split('/')['3']; //if you use absolute URLs then disable this line 

     if($(this).attr('href')==path) 
     { 
      $(this).addClass("selected"); 
     } 
    }); 
}); 
</script>

這將增加selected類鏈接（S），如果它是href的瀏覽器的當前URL匹配。

來源

2011-09-28 19:24:54 Usman

值得一提的是，由於這是客戶端，如果用戶關閉了Javascript，它將不起作用。這並不常見，但仍值得記住。 –

我相信你會讓它變得比需要的更復雜。這裏有一個快速的解決方案，使用CSS而不是龐大的JS :)

首先，你的身體標籤應該有分配給他們的類。

<body class="products">

例如。

現在，在你的菜單中，分配每個<li>（我猜/希望你正在使用一個列表，你沒有提供任何代碼，所以我不知道......）以及類。

<li class="products"><a href="/products/">Products</a></li>

例如。現在

，在你的CSS，只要做到這一點：

body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }

這些CSS規則將僅被「拿來主義」，當訪問者是「選擇」頁面上。

這種技術毫無疑問是msot的使用方式，因爲它是毫無疑問的最快和非常友好的搜索引擎優化，因爲您的主導航中的代碼始終保持相同的整個網站。

來源

2011-09-28 20:12:09

CSS精靈菜單和jQuery addClass（）方法

回答

相關問題