jquery - 一个简单的 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'); 
    };

});

同样，这是一种非常简单和笨拙的方法，但也许它会让你开始......