一個簡單的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'); 
    }; 

}); 

再次，這是一個痛苦的簡單和笨拙的做這件事的方式，但也許它會幫助您瞭解...