JQuery mouseover and click event

Question

I have a menu list, as I scroll over the menu list the related divs are shown or hidden. This works fine with the following:

$('.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;
});

What is the most efficient way to display the relevant div when I click on the menu item, without having to type out the above code again (but using the click event rather than the mouseover event).

Markup:

<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>

Would you mind showing your markup?

Dutchie432
– Dutchie432

2011-04-23 11:08:16 +00:00
Commented Apr 23, 2011 at 11:08 — Dutchie432
– Dutchie432, Commented Apr 23, 2011 at 11:08

Mark Coleman · Accepted Answer · 2011-04-23 11:18:46Z

2

Just extract it out to use a named function.

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

edited Apr 23, 2011 at 11:18

answered Apr 23, 2011 at 11:13

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bland_dan Over a year ago

Thanks Mark, sometimes the answer is so simple it stares me in the face.

Mark Coleman Over a year ago

No problem, glad I was able to help :)

Collectives™ on Stack Overflow

JQuery mouseover and click event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related