Question

我正在创建一个结帐页面，我正在构建它，所以这是三个步骤。

送货信息
付款
订单确认

我想要创建它，以便它们按顺序显示，一次只显示一个。到目前为止我创建的是使用切换方法方法，它有点做我想要的使div显示和隐藏，但我想以更顺序的方式，这意味着他们无法完成步骤二步骤1。

切换方法也是一个问题，如果我按下按钮2，我再次按下该按钮以使其消失。

此外，我创建的切换方法，即shippinginfocontainer（运输信息），它永远不会消失。它总是显示。我尝试将display：none添加到它的CSS部分，但之后它永远不会显示。

切换方法正在发挥作用，并未被打破。我正在寻找可能添加到其中的其他解决方案，以获得制作此顺序所需的效果，而不必“解开”div。

另外，当我去另一个div时，我无法让第一个div容器（送货信息）消失。

$( '#button1' ).click(function() {
  $( '.shippinginfocontainer. ).toggle( "slow" );
});
$( '#button2' ).click(function() {
  $('.paymentinfocontainer' ).toggle( "slow" );
});
$( '#button3' ).click(function() {
  $( '.confirmationinfocontainer' ).toggle( "slow" );
});

jsfiddle仍然没有显示我是如何创建它的。这是我第二次使用它...抱歉。我只是觉得这是一种更简单的方法来阅读代码。 Fiddle

...编辑

Answer 1

这是我的代码

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide1").click(function(){
        $("#p1").show();
        $("#p2").hide();
        $("#p3").hide();
    });
    $("#hide2").click(function(){
        $("#p1").hide();
        $("#p2").show();
        $("#p3").hide();
    });
   $("#hide3").click(function(){
        $("#p1").hide();
        $("#p2").hide();
        $("#p3").show();
    });
});
</script>
</head>
<body>

<p id="p1">Hey there, its me  urs truly p1.</p>
<p id="p2">Hey there, its me  urs truly p2.</p>
<p id="p3">Hey there, its me  urs truly p3.</p>

<button id="hide1">Button1</button>
<button id="hide2">Button2</button>
<button id="hide3">Button3</button>

</body>
</html>

Answer 2

我已经在jsfiddle上更新了你的代码，请检查一下。

$(function(){
$( '#button1' ).click(function() {
  $( '.shippinginfocontainer' ).toggle( "slow" );
});
$( '#button2' ).click(function() {
  $('.paymentinfocontainer' ).toggle( "slow" );
});


$( '#button3' ).click(function() {
  $( '.confirmationinfocontainer' ).toggle( "slow" );
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="spancenter"><p>Easy three step ordering process</p></span>
				<ul class="checkoutmenu">
					<button class="checkoutbutton" id="button1">1. Shipping Information</button>
					<button class="checkoutbutton" id="button2">2. Payment Information</button>
					<button class="checkoutbutton" id="button3">3. Order Confirmation</button>
				</ul>
<div class="shippinginfocontainer">HELLO DUMMY</div>
<div class="paymentinfocontainer">HELLO DUMMY</div>
<div class="confirmationinfocontainer">HELLO DUMMY</div>

此致

Answer 3

试试这段代码::

$('#button1').click(function(){
  $(".paymentinfocontainer, .confirmationinfocontainer").hide("slow");
  $(".shippinginfocontainer").show("slow");
});
$('#button2').click(function(){
  $(".shippinginfocontainer, .confirmationinfocontainer").hide("slow");
  $(".paymentinfocontainer").show("slow");
});
$('#button3').click(function(){
  $(".paymentinfocontainer, .shippinginfocontainer").hide("slow");
  $(".confirmationinfocontainer").show("slow");
});

CHECK FIDDLE HERE

OR

另请尝试：已成功测试

<button class="checkoutbutton" onclick="showhide('shippinginfocontainer');" id="button1">1. Shipping Information</button>
<button onclick="showhide('paymentinfocontainer');" class="checkoutbutton" id="button2">2. Payment Information</button>
<button onclick="showhide('confirmationinfocontainer');" class="checkoutbutton" id="button3">3. Order Confirmation</button>

function showhide(show) {
  var y = ['shippinginfocontainer','paymentinfocontainer','confirmationinfocontainer'];
  y.splice( $.inArray(show, y), 1 );
  for(var i=0;i<=y.length;i++) {
      $("."+y[i]).hide("slow");
  }
  $("."+show).show("slow");
}

Div隐藏并按顺序显示

3 个答案: