CODEWITHSUNDEEP
jquery
chowwy
chowwy

Reputation: 1126

open new page on jQuery click + stop show/hide

I've got a menu that I'm using to show/hide content. Works great, but when users click on the first link, I want to reload the entire page, instead of doing the show/hide function. For the other menu items, I want to keep the show/hide.

Here's my code:

jQuery

$(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('<span id="load">LOADING...</span>');  
    $('#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;  
    });
});

HTML

<div id="leftcol">

<div id="menu">
<ul id="nav">
<li><a href="/option1">Option 1</a></li><br />
<li><a href="/option2">Option 2</a></li><br />
<li><a href="/option3">Option 3</a></li><br />
</ul>
</div>
</div>

<div id="content">
<div>

Upvotes: 0

Views: 356

Answers (1)

chrisn
chrisn

Reputation: 2135

In your $('#nav li a').click(function(){ block, you'll want to check if it's the first item in the list, and if it is, simply return in order to refresh the page:

$(document).ready(function() {
    var $first = $('#nav li a').first();

    $first.addClass('blue');    
    $('#nav li a').click(function(){
        if ( this == $first[0] ) {
            return true;
        }

        $first.removeClass('blue');
        ...

Upvotes: 2

Related Questions