JQuery mouseover and click event
<p>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:</p>

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

<p>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). </p>

<p>Markup:</p>

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

&lt;div class="homepage_display" id="new"&gt;
Content
&lt;/div&gt;

&lt;div class="homepage_display" id="in_progress"&gt;
Content
&lt;/div&gt;

&lt;div class="homepage_display" id="completed"&gt;
Content
&lt;/div&gt;

&lt;div class="homepage_display" id="archived"&gt;
Content
&lt;/div&gt;
</code></pre>
