2

我的页面上有以下内容div：

<div id="page1">
    Some content
</div>

<div id="page2">
    More content
</div>

<div id="page3">
    Even more content
</div>

在页面底部，我有两个按钮Continue-Back我需要做的是根据用户输入显示和隐藏 div。

默认情况下page1应该显示，其他的都是隐藏的，当用户点击Continue'page2时，is shown and第1页和第3页显示are hidden - if the user clicks theBack button thenpage1`，其他的都是隐藏的，依此类推。

我对如何在 jQuery 中实现这一点有一个完整的心理障碍——欢迎任何和所有帮助。

4

6 回答 6

5

您需要将这些元素放在一个容器中，然后使用prev和next遍历它们。像这样的东西：

$('.next').click(function() {
    $('.sequence-container div').hide();
    var $next = $('.sequence-container div:visible').next();
    $next.length ? $next.show() : $('.sequence-container div:first').show();
});

$('.prev').click(function() {
    $('.sequence-container div').hide();
    var $prev = $('.sequence-container div:visible').prev();
    $prev.length ? $prev.show() : $('.sequence-container div:last').show();
});

示例小提琴

更新

为了防止循环从开始/结束使用这个：

$('.next').click(function() {
    var $next = $('.sequence-container div:visible').next();    
    if ($next.length) {
        $('.sequence-container div').hide();
        $next.show();
    }
});

$('.prev').click(function() {
    var $prev = $('.sequence-container div:visible').prev();
    if ($prev.length) {
        $('.sequence-container div').hide();
        $prev.show();
    }
});

更新的小提琴

于 2013-07-23T13:36:04.640 回答
2

首先，你必须给所有这些页面一个类，比如说page. 然后为按钮添加一个处理程序：

$('.button_prev').click(function(e){
    var block   = $('.page:visible'),
        prev    = block.prev();
    if (prev.length) {
        prev.show();
        block.hide()
    }
});

$('.button_next').click(function(e){
    var block   = $('.page:visible'),
        next    = block.next();
    if (next.length) {
        next.show();
        block.hide()
    }
});
于 2013-07-23T13:42:28.963 回答
1

嗯，完成它并看到其他响应，我的感觉可能有点奇怪

$(document).ready(function() {

//Your first page
var curPage = 1;

//your number of pages
var nbPage = 3;

$("#page2").hide();
$("#page3").hide();
$("#next").click(function(event){
    if (curPage+1 <= nbPage) curPage += 1;
    for(var i = 1; i<=3; i++){
        if (i == curPage) $("#page"+curPage).show();
        else $("#page"+i).hide();
    }
});
$("#back").click(function(event){
    if (curPage-1 >= 1) curPage -= 1;
    for(var i = 1; i<=3; i++){
         if (i == curPage) $("#page"+curPage).show();
        else $("#page"+i).hide();
    }
});
});

这是HTML。

<div id="page1">
   Some content
</div>

<div id="page2">
    More content
</div>

<div id="page3">
    Even more content
</div>

<button id="back">back</button>
<button id="next">next</button>

您可以查看此工作演示：http: //jsfiddle.net/kJ45a/2/

（对于其他人，如果这种方式不好，请随时反馈）

于 2013-07-23T13:43:51.657 回答
0

您可以使用 jQuery ( http://api.jquery.com/toggleClass/ ) 来更改要切换的元素的类，并在您的 css 文件中，让这些类使用适当的“显示”值http://www.w3schools.com/cssref/pr_class_display.asp

于 2013-07-23T13:35:03.357 回答
0

您需要将click()事件绑定到页面底部的按钮。既然你没有在标记中列出它们，那么我猜它们是这样的：

标记：

<button class="back">Back</button>
<button class="continue">Continue</button>

现在，当用户单击按钮时，您将需要 jQuery 中的实际绑定，如下所示：

JavaScript：

$('.continue').click(function() {
    // Logic goes here for what should happen when user clicks Continue button
});

$('.back').click(function() {
    // Logic goes here for what should happen when user clicks Back button
});

虽然我知道您没有使用图像进行幻灯片放映，但您的导航最类似于幻灯片，因此请查看此jsFiddle

于 2013-07-23T13:38:19.620 回答
0

这是我制作的一个基本示例：

jQuery部分：

$(document).ready(function() {

$("#page2").css('visibility', 'hidden');
$("#page3").css('visibility', 'hidden');

$("#continue").click(function(){
  $("#page1").css('visibility', 'hidden');
  $("#page2").css('visibility', 'visible');
});

$("#back").click(function(){

  $("#page1").css('visibility', 'visible');
  $("#page2").css('visibility', 'hidden');

});

});

HTML部分：

<div id="page1">
Some content
</div>

<div id="page2">
More content
</div>

<div id="page3">
Even more content
</div>
<input type="button" id="continue" value="continue" />
<br/>
<input type="button" id="back" value="back" />

PS：请参阅此处的工作小提琴：http: //jsfiddle.net/UKnrE/1/

于 2013-07-23T13:43:16.497 回答