Use jquery to pull in the 'next' content

Question

I'm trying to add a 'next' button to my content rotation. The content for each slide are on subpages. It works to click on each slides actual nav link, but the 'next' link won't pull in the content I need.

HTML

<ul class="navtop">
    <li class="selected"><a href="slide-01.html">1</a></li>
    <li><a href="slide-02.html">2</a></li>
    <li><a href="slide-03.html">3</a></li>
    <li><a href="slide-04.html">4</a></li>
</ul>

JS

$('a.next').click(function() {
    var nexthref = $('.navsub li.selected a').href;
    //remove and add selected class
    var next = $('.navsub li.selected').next('li');
    $('.navsub li.selected').removeClass('selected');
    $(next).addClass('selected');

    //fade out and fade in      
    $('.pull div').fadeOut('slow', function(){
            var current = $('.navsub li.selected a');           
            $(current).load(nexthref + " .pullSource div", function(){
                    $(this).fadeIn('slow');
            });

        });
    return false;


});

In firebug is says the nexthref is undefined; am I putting that var in the wrong place? Where should it be?

Thank-you.

Answer 1

Thanks, figured it out.

$('a.next').click(function() {      
    //remove and add selected class
    var next = $('.navsub li.selected').next('li');
    $('.navsub li.selected').removeClass('selected');
    $(next).addClass('selected');

    //fade out and fade in  
    var nexthref = $('.navsub li.selected a').attr('href');
    $('.pull div').fadeOut('slow', function(){
            var current = $('.navsub li.selected a');           
            $(this).load(nexthref + " .pullSource div", function(){
                    $(this).fadeIn('slow');
            });

        });
    return false;


});