Question

我的页面上有以下div：

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

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

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

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

默认情况下，当用户点击page1第2页Continue'第1页和第3页is shown and返回are hidden - if the user clicks the第1页时，应显示button then并隐藏其他内容`显示，其他隐藏等等。

我有一个关于如何在jQuery中实现它的完整心理块 - 欢迎任何和所有帮助。

Answer 1

您需要将这些元素放在容器中，然后使用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();
});

Example fiddle

<强>更新

为防止从开始/结束循环使用此：

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

Updated fiddle

Answer 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()
    }
});

Answer 3

嗯，完成它并找到其他响应，我觉得可能有点奇怪

$(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/

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

Answer 4

您可以使用jQuery（http://api.jquery.com/toggleClass/）来更改要切换的元素的类，并在css文件中，让这些类使用“display”{{3}的相应值。 }

Answer 5

您需要将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

Answer 6

这是我做的一个基本例子：

JQuery Part：

$(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/

jQuery - 根据用户输入显示/隐藏

6 个答案: