在.content divs之間導航

Question

我想在.content divs之間導航。

我試圖用下面的代碼來做到這一點，但它不能正常工作。

當我點擊最後一個div中的鏈接.next時，所有內容都消失了，而不是再次轉到第一個.content div。

而當我點擊鏈接上一頁，內容消失。

例如： http://jsfiddle.net/tebzsuwt/3/

的jQuery：

$(".container div").each(function(e) { 
    if (e != 0) 
     $(this).hide(); 
}); 

$(".btn-next").click(function(){ 
    if ($(".container div:visible").next().length != 0) 
     $(".container div:visible").fadeOut(function(){ 
      $(this).next().fadeIn(); 
     }); 
    else { 
     $(".divs div:visible").fadeOut(function(){ 
      $(".divs div:first").fadeIn(); 
     }); 
    } 
    return false; 
}); 

$(".btn-prev").click(function(){ 
    if ($(".container div:visible").prev().length != 0) 
     $(".container div:visible").fadeOut(function(){ 
      $(this).prev().fadeIn(); 
     }); 
    else { 
     $(".container div:visible").fadeOut(function(){ 
      $(".container div:last").fadeIn(); 
     }); 
    } 
    return false; 
}); 

Answer 1

我做了你的代碼的一些細微的變化，這裏是一個工作示例

HTML：

<div class="container"> 
    <h2>Title</h2> 
    <a href="#" class="btn-prev">Prev</a> 
    <a href="#" class="btn-next">Next</a> 
    <div> 
     <div class="content"> 
      <p>test 1</p> 
      <p>test 2</p> 
      <div class="links"> 
       <a href="#">Link 1</a> 
       <a href="#">Link 2</a> 
      </div> 
     </div> 

     <div class="content"> 
      <p>test 2</p> 
      <p>test 3</p> 
      <div class="links"> 
       <a href="#">Link 2</a> 
       <a href="#">Link 3</a> 
      </div> 
     </div> 

     <div class="content"> 
      <p>test 4</p> 
      <p>test 5</p> 
      <div class="links"> 
       <a href="#">Link 4</a> 
       <a href="#">Link 5</a> 
      </div> 
     </div> 
    </div> 
</div> 

和JS ：

$(".container .content").each(function(e) { 
    if (e != 0) 
     $(this).hide(); 
}); 

$(".btn-next").click(function(){ 
    if ($(".container .content:visible").next().length != 0) 
     $(".container .content:visible").fadeOut(function(){ 
      $(this).next().fadeIn(); 
     }); 
    else { 
     $(".container .content:visible").fadeOut(function(){ 
      $(".container .content:first").fadeIn(); 
     }); 
    } 
    return false; 
}); 

$(".btn-prev").click(function(){ 
    if ($(".container .content:visible").prev().length != 0) { 
     $(".container .content:visible").fadeOut(function(){ 
      $(this).prev().fadeIn(); 
     });} 
    else { 
     $(".container .content:visible").fadeOut(function(){ 
      $(".container .content:last").fadeIn(); 
     }); 
    } 
    return false; 
});