就是因為這種小功能造就了日後的大功能
--------------------------------------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
function go_to1(){
show_div(1);
document.getElementById('MName').innerHTML=document.getElementById('Name').value;
document.getElementById('MId').innerHTML=document.getElementById('Id').value;
}
function go_to2(){
show_div(2);
}
function go_to3(){
show_div(3);
}
function show_div(id){
if(id=="1"){
$(".MInformation2").show();
$(".MInformation").hide();
$(".MInformation3").hide();
}
if(id=="2"){
$(".MInformation3").show();
$(".MInformation").hide();
$(".MInformation2").hide();
}
if(id=="3"){
$(".MInformation").show();
$(".MInformation2").hide();
$(".MInformation3").hide();
}
}
</script>
</head>
<body>
<div id="center">
<div class="MInformation">
<label>姓名：</label>
<input type="text" name="Name" id="Name" value="" /><br>
<label>識別碼：</label>
<input type="text" name="Id" id="Id" value="" /><br>
<input type="button" name="button" value="下一步" onclick="go_to1();">
</div>
<div class="MInformation2" style="display: none;">
<label>姓名：</label>
<label id="MName"></label><br>
<label>識別碼：</label>
<label id="MId"></label><br>
<input type="button" name="button" value="上一步" onclick="go_to3();">
<input type="button" name="button" value="下一步" onclick="go_to2();">
</div>
<div class="MInformation3" style="display: none;">
<p>test3</p>
<input type="button" name="button" value="上一步" onclick="go_to1();">
</div>
</div>
</body>
</html>
記得要把JQuery載入....
沒有留言:
張貼留言