如何修改悬停脚本以使用点击功能？

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