如何修改懸停腳本以使用點擊功能？

Question

我在this page上有以下腳本，處理淡入和淡出div，以便在懸停在導航欄上時更改導航欄中葉子的顏色，滑動聯繫表單以及淡化一頁內容到另一個：

$(function() 
{ 

    var newHash = "", 
     $mainContent = $("#main-content"), 
     $pageWrap = $("#page-wrap"), 
     baseHeight = 0, 
     $el, 
    curTab = "#index"; 

    $("nav").delegate("a.fade", "click", function() 
    { 
     window.location.hash = $(this).attr("href"); 


//  $(this).addClass("current", 3000); 
//  $("#contact").removeClass("current", 3000); 
     return false; 
    }); 

    $(window).bind('hashchange', function() 
    { 

     newHash = window.location.hash.substring(1); 

     if (newHash) 
     { 
      $pageWrap.height($pageWrap.height()); 
      baseHeight = $pageWrap.height() - $mainContent.height(); 

      $mainContent 
       .find("#guts") 
       .fadeOut(500, function() 
       { 
        $mainContent.hide().load(newHash + " #guts", function() 
        { 
         $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function() 
         { 
          $mainContent.fadeIn(500); 
          $pageWrap.css("height", "auto"); 
         }); 

//      $("nav a").removeClass("current"); 
//     curTab = "#" + /^(.+)\..+$/.exec(newHash)[1]; 
//     $(curTab).addClass("current"); 
        }); 
       }); 
     }; 
    }); 

$("#contact").click(function() 
{ 
    $("#panel").slideDown("slow"); 

    return false; 
}); 

$(".close").click(function() 
{ 
    $("#panel").slideUp("slow"); 
    return false; 
}); 

$("nav a").hover(
    function() { 
     $(".current", this).stop().animate({ 
      opacity: 1 
     }, { 
      duration: 300, 
      specialEasing: { 
       opacity: 'linear', 
      }, 

     }); 
    }, function() { 
     $(".current", this).stop().animate({ 
      opacity: 0 
     }, { 
      duration: 2000, 
      specialEasing: { 
       opacity: 'linear', 
      }, 

    }); 
}); 


    $(window).trigger('hashchange'); 

}); 

我現在想要得到這方面的工作有一些點擊功能，即，使得當前頁的葉仍然是綠色的，而不是褐色，並且接觸葉子是綠色的，當接觸形式是開放的，但我不知道如何做到這一點。例如，我嘗試將代理更改爲：

$("nav").delegate("a.fade", "click", function() 
    { 
     window.location.hash = $(this).attr("href"); 
     $("#panel").slideUp("slow"); 

     $(".current", this).animate({ 
      opacity: 1 
     }, { 
      duration: 300, 
      specialEasing: { 
       opacity: 'linear', 
      }, 

     }); 

但是被點擊的頁面不保持綠色。只要鼠標移出div，它就會返回到棕色。

如果有人能幫助我做到這一點，我將不勝感激。

感謝，

尼克

HTML新增：

<div id="nav1"> 
    <a href="index.html" class="fade" id="index"> 

    <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div> 

    <div class="current"><img src="images/bodhi-leaf-green.png"></div> 
    <div class="text"><img src="images/home.png"></div> 

    </a> 
</div> 

Answer 1

只是一個類添加到元素單擊時。然後，在懸停函數中，首先檢查元素是否具有該類，如果它沒有此類，則只執行懸停效果。

事情是這樣的：http://jsfiddle.net/2J8Cc/

$('div').hover(function(){ 
    if(!$(this).hasClass('clicked')){ 
     $(this).fadeTo(250,1); 
    } 
},function(){ 
    if(!$(this).hasClass('clicked')){ 
     $(this).fadeTo(250,0.5); 
    } 
}) 
.click(function(){ 
    $(this).addClass('clicked');  
}); 

編輯
在迴應這個答案OP的評論，這裏就是我會做給他提供的HTML：

$("nav a").hover(
    function() { 
     if(!$(this).hasClass('clicked')){ 
      $(".current", this).stop().animate({ 
       opacity: 1 
      }, { 
       duration: 300, 
       specialEasing: { 
        opacity: 'linear', 
       }, 

      }); 
     } 
    }, function() { 
     if(!$(this).hasClass('clicked')){ 
      $(".current", this).stop().animate({ 
       opacity: 0 
      }, { 
       duration: 2000, 
       specialEasing: { 
        opacity: 'linear', 
       }, 
      }); 
     } 
}) 
.click(function(){ 
    $(this).addClass('clicked'); 
}); 

Answer 2

我認爲它應該像這樣工作：

1. 點擊葉時剛剛褪去和完整附上一些保持葉綠色的CSS類。
2. 時，另一扇被點擊剛纔的所有葉子重置爲棕色（如果有比方說綠色類，你可以淡出），並做點休息，像1

所以它真的應該像復位葉子到棕色，並留下一個點擊綠色。

如果你需要的代碼，就問：d