一个简单的jquery导航

Question

我想创建一个文本导航，而不是使用服务器端我想使用jquery并只写出一次内容。

参见示例图片....

导航栏将是底部的箭头。如果你到达最后将箭头转为白色，或者如果你开始使左箭头变白。

任何帮助将不胜感激

Answer 1

您的jQuery解决方案将取决于您希望导航如何工作。你想替换文字吗？你想在项目之间滚动吗？这里有很多工作......

但是，让你从这里开始是一种“鸭子式”的方式......（注意：这是一种非常“开始”的方式，所以计划研究更好的解决方案线。）

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
    };

});

然后将其反转为左边。

$('.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'); 
    };

});

同样，这是一种痛苦的简单而笨拙的做法，但也许它会让你开始......