jQuery - use link for show/hide function, but prevent link from opening in url
<p>I've got a good jQuery show/hide function working; the problem is that if the link is opened by typing the URL directly, it doesn't degrade well--you can see all of the elements at once.</p>

<p>Is there any way to use the links in the show/hide function, but prevent the links from opening when typed directly into the browser address bar?</p>

<p>Here's my code:</p>

<p><strong>jQuery</strong></p>

<pre><code>$(document).ready(function() {

    $('#nav li a').first().addClass('blue');

    $('#nav li a').click(function(){

    $('#nav li a').first().removeClass('blue');
    $('#nav li a').removeClass('blue');
    $(this).addClass('blue');

    var toLoad = $(this).attr('href')+'#content';  
    $('#content').hide(0,loadContent);  
    $('#load').remove();  
    $('#wrapper').append('&lt;span id="load"&gt;LOADING...&lt;/span&gt;');  
    $('#load').fadeIn('normal');  
    //window.location.hash = //$(this).attr('href').substr(0,$(this).attr('href').length-0);  
    function loadContent() {  
        $('#conent').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#content').show(0,hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  
    });
});  
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="leftcol"&gt;

&lt;div id="menu"&gt;
&lt;ul id="nav"&gt;
&lt;li&gt;&lt;a href="/option1"&gt;Option 1&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
&lt;li&gt;&lt;a href="/option2"&gt;Option 2&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
&lt;li&gt;&lt;a href="/option3"&gt;Option 3&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div id="content"&gt;
&lt;div&gt;
</code></pre>
