使用jQuery顯示隱藏div使用Next Previous按鈕？

Question

例如我有10 <div>，我想顯示每個<div>在下一個按鈕點擊&顯示以前的<div>上一個按鈕點擊。 如何使用jQuery做到這一點？

Answer 1

<div class="divs"> 
    <div class="cls1">1</div> 
    <div class="cls2">2</div> 
    <div class="cls3">3</div> 
    <div class="cls4">4</div> 
    <div class="cls5">5</div> 
    <div class="cls6">6</div> 
    <div class="cls7">7</div> 
</div> 
<a id="next">next</a> 
<a id="prev">prev</a> 

這是一個非常簡單的HTML例子。

用一個簡單的jQuery代碼像這樣的：

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

    $("#next").click(function(){ 
     if ($(".divs div:visible").next().length != 0) 
      $(".divs div:visible").next().show().prev().hide(); 
     else { 
      $(".divs div:visible").hide(); 
      $(".divs div:first").show(); 
     } 
     return false; 
    }); 

    $("#prev").click(function(){ 
     if ($(".divs div:visible").prev().length != 0) 
      $(".divs div:visible").prev().show().next().hide(); 
     else { 
      $(".divs div:visible").hide(); 
      $(".divs div:last").show(); 
     } 
     return false; 
    }); 
}); 

對於進一步的解釋： 第一個塊將隱藏除第一個（e是jQuery中的各功能的計數器）每格。

其他兩個塊處理單擊按鈕。 我們正在尋找可見的div和點擊我們接下來顯示（請參閱下一個（）函數的jquery或以前的div（prev（）函數的jquery）

如果沒有下一個div ）我們都躲在可見股利和顯示的第一個

在線例子在這裏：http://jsfiddle.net/hsJbu/

Answer 2

這聽起來像一個旋轉木馬，你想要什麼

下面是一些例子：http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

你可以有一個下一個和上一個按鈕在一個div滑動和舊滑出（或其他任何影響）

傳送帶不依賴於圖像，它可以是充滿內容的Div。

好運&有一個愉快的一天

編輯：白手起家自己的旋轉木馬：http://twitter.github.io/bootstrap/javascript.html#carousel

Answer 3

試試下面的東西，如果ü要由你自己去做。將所有div設置爲顯示：除第一個外最初都沒有。也在下面的代碼更改maxdiv值基於你有div的數量（或者如果數量可以改變，可以在jquery中找到它）。

$(document).ready(function(){ 
var tracker = 1; 
var maxdivs = 4; 

$("#next").click(function(){ 
var divclass = ".cls" + tracker; 
$(divclass).css("display","none"); 
tracker = tracker + 1; 
if(tracker > maxdivs) 
    tracker = 1; 
divclass = ".cls" + tracker; 
$(divclass).css("display","block"); 
}); 

$("#prev").click(function(){ 
var divclass = ".cls" + tracker; 
    $(divclass).css("display","none"); 
    tracker = tracker - 1; 
    if(tracker < 1) 
    tracker = maxdivs; 
    divclass = ".cls" + tracker; 
    $(divclass).css("display","block"); 
}); 
}); 

Answer 4

你可以這樣說：

HTML：

<div class="mydivs"> 
    <div>div 1</div> 
    <div>div 2</div> 
    <div>div 3</div> 
    <div>div 4</div> 
</div> 
<button name="prev">go to previous div</button> 
<button name="next">go to next div</button> 

JS：

$(document).ready(function() { 
    var divs = $('.mydivs>div'); 
    var now = 0; // currently shown div 
    divs.hide().first().show(); // hide all divs except first 
    $("button[name=next]").click(function() { 
     divs.eq(now).hide(); 
     now = (now + 1 < divs.length) ? now + 1 : 0; 
     divs.eq(now).show(); // show next 
    }); 
    $("button[name=prev]").click(function() { 
     divs.eq(now).hide(); 
     now = (now > 0) ? now - 1 : divs.length - 1; 
     divs.eq(now).show(); // show previous 
    }); 
}); 

jsfiddle