JQuery鼠標懸停和點擊事件

Question

我有一個菜單列表，因爲我在菜單列表上滾動顯示或隱藏相關的div。此工作正常的情況如下：

$('.ov_menu li').mouseover(function(){ 
     var div_show = ($(this).parent().attr('href')); 

     $('.homepage_display').hide(); 
     $(div_show).show(); 
     $('.ov_menu li').css('background-color','#ffffff') 
     $(this).css('background-color','#cceffc'); 

     return false; 
}); 

什麼是顯示相關的div當我點擊菜單項，無需而不必再次輸入了上面的代碼（但使用click事件的最有效方式mouseover事件）。

標記：

<div class="ov_menu"> 
     <ul> 
      <a href="#new"><li>Create New Check</li></a> 
      <a href="#in_progress"><li>In Progress Checks</li></a> 
      <a href="#completed"><li>Completed Checks</li></a> 
      <a href="#archived"><li>Archived Checks</li></a> 
     </ul> 
</div> 

<div class="homepage_display" id="new"> 
Content 
</div> 

<div class="homepage_display" id="in_progress"> 
Content 
</div> 

<div class="homepage_display" id="completed"> 
Content 
</div> 

<div class="homepage_display" id="archived"> 
Content 
</div> 

Answer 1

只需提取出來使用命名功能。

function ShowSomething() { 
    var div_show = ($(this).parent().attr('href')); 

    $('.homepage_display').hide(); 
    $(div_show).show(); 
    $('.ov_menu li').css('background-color', '#ffffff') 
    $(this).css('background-color', '#cceffc'); 

    return false; 
} 

$('.ov_menu li').mouseover(ShowSomething); 
//or 
$('.ov_menu li').click(ShowSomething); 

Simple example on jsfiddle