JQuery鼠标悬停和点击事件
问题描述:
我有一个菜单列表,因为我在菜单列表上滚动显示或隐藏相关的div。此工作正常的情况如下:JQuery鼠标悬停和点击事件
$('.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>
答
只需提取出来使用命名功能。
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);
+0
谢谢马克,有时答案很简单,它盯着我的脸。 – 2011-04-23 11:18:50
+0
没问题,很高兴我能帮助':)' – 2011-04-23 11:21:49
是否可以让您的标记? – Dutchie432 2011-04-23 11:08:16