一个简单的jQuery导航

Question

我想创建文本的导航，但不是使用服务器端的我想使用jQuery和只写出来的内容一次。

看到样品图像....

对NAV条将在底部的箭头所示。如果你到了最后，把箭头变成白色，或者如果你开始让左箭头变成白色。

任何帮助将不胜感激

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

}); 

再次，这是一个痛苦的简单和笨拙的做这件事的方式，但也许它会帮助您了解...