JS Filter links are moving page - not sure why
<p>I've created a simple menu setup whereby all info is on the same page - just most is hidden until that tab is selected. The filter JS I'm using works great for this but for some reason (in CHROME only), when the menu item is clicked (eg, Location, Help), the screen shoots up a few hundred pixels (displays the selected info just fine though). Strangely, this happens only when the page is refreshed and the item is clicked for the first time. After that, everything works great!</p>

<p>Below is the pertinent code but to see it in action, see <a href="http://www.southsideurbanmarket.com/" rel="nofollow">test site</a></p>

<p>The JS I'm using for the filter is:</p>

<pre><code>    $(document).ready(function() {
    $('#nav a').click(function() {
        $('#nav a.current').removeClass('current');
        $(this).addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ','');

        $('#content div').each(function() {
            if(!$(this).hasClass(filterVal)) {
                    $(this).hide().addClass('hidden');
            } else {
                $(this).show().removeClass('hidden');
            }
        });
    return false;
    });
});
</code></pre>

<p>with the HTML menu and info as:</p>

<pre><code>&lt;ul id=nav&gt;
&lt;a href="#" class="current"&gt;&lt;li&gt;Mission&lt;/li&gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;li&gt;Location&lt;/li&gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;li&gt;Help&lt;/li&gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;li&gt;Vendors&lt;/li&gt;&lt;/a&gt;        
&lt;/ul&gt;


        &lt;div id=content&gt;
        &lt;div class=mission&gt;
            &lt;img src="./images/roosters.jpg"&gt;
            &lt;h2&gt;The Mission&lt;/h2&gt;
            &lt;p&gt;...&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class=location&gt;
            &lt;img src="./images/old_market.jpg"&gt;
            &lt;h2&gt;Our Location&lt;/h2&gt;
            &lt;p&gt;...&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class=help&gt;
            &lt;img src="./images/helpers.jpg"&gt;
            &lt;h2&gt;Get Involved&lt;/h2&gt;
            &lt;p&gt;...&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class=vendors&gt;
            &lt;img src="./images/artisans.jpg"&gt;
            &lt;h2&gt;Our Vendors&lt;/h2&gt;
            &lt;p&gt;...&lt;/p&gt;
        &lt;/div&gt;          

    &lt;/div&gt;
</code></pre>
