A simple jquery navigation

Question

I want to create a navigation of text but rather than using serverside i want to use jquery and just write out the content once.

see sample image ....

The nav bars will be the arrows at the bottom. If you get to the end turn the arrow to white or if you're starting make the left arrow white.

Any help will be appreciated

Answer 1

Your jQuery solution will depend on how you want the navigation to work. Do you want to replace the text? Do you want to scroll between items? There isn't much to work with here...

But, to get you started here is a "duck-tape" way of doing it... (Note: This is a not-pretty 'getting started' way of doing it, so plan to research better solutions down the line.)

var current = '1';
$('.navR').click(function (e) {  //When user clicks on the Right nav button...
    if (current == '1') { // If you are going to the first bit of new content...
        $('#content').replaceWith("<div id='content'>Your First Content Here...</div>");  //Replace the content with...
        current++;
            $('.navR').css('color','red'); // Make the Right arrow red when more content is left

    } else if (current == '2'){ // If you are going to the second bit of new content ....
        $('#content').replaceWith("<div id='content'>Your Second Content Here...</div>"); // Replace the content with....
        current++;
            $('.navR').css('color','white'); // Turn arrow White on last item
    };

});

And then reverse it for the left.

$('.navL').click(function (e) {
    if (current == '2') {
        $('#content').replaceWith("<div id='content'>Your First Content Here...</div>");
        current--;
            $('.navL').css('color','red'); 

    } else if (current == '1'){
        $('#content').replaceWith("<div id='content'>Your Second Content Here...</div>");
        current--;
            $('.navL').css('color','white'); 
    };

});

Again, this is a painfully simple and clumsy way of doing it, but maybe it will get you started...