部门隐藏和显示顺序

-1

我正在创建一个结帐页面，我构建它，所以它是三个步骤。部门隐藏和显示顺序

航运信息
付款
订单确认

我想创造这个让他们依次显示只有一个一次显示一个。到目前为止我创建的是使用切换方法，它有点做我想让div显示和隐藏的内容，但是我希望以更顺序的方式进行，这意味着他们无法在没有完成步骤的情况下进入第二步1.

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

此外，使用我创建的切换方式，shippinginfocontainer（发货信息），它永远不会消失。它总是显示。我尝试在它的CSS部分添加display：none，但它从不显示。

切换方法正在工作，并没有被破坏。我正在寻找其他解决方案，可能会添加到此以获得期望的效果，使此顺序，而不必“解开”div。

另外我无法让第一个div容器（shipping info）在去不同的div时消失。

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

jsfiddle仍然不显示我如何创建它。这只是我第二次使用它...对不起。我只是认为这会更容易阅读代码。 Fiddle

编辑...

来源

2015-05-05 Paul

这里把代码中的问题，不只是在拨弄。 – Barmar

在您的小提琴中，您没有加载jQuery库，并且您不应该在Javascript面板中放置'

这里是我的代码

<!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>

来源

2015-05-05 05:26:13

希望它有帮助！ –

试试这个代码::

$('#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

尝试也：测试工作顺利

<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"); 
}

来源

2015-05-05 06:33:37 Lakhan

部门隐藏和显示顺序

相关问题