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

JQuery鼠标悬停和点击事件

1 个答案: