部門隱藏和顯示順序

-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

相關問題