1. 程式人生 > >js如何實現點選一個按鈕顯示一個div,然後該div上有一個按鈕,點選此按鈕後隱藏,隱藏的同時顯示另外一個div,而在次彈出的div也有一個按鈕,點選後隱藏.

js如何實現點選一個按鈕顯示一個div,然後該div上有一個按鈕,點選此按鈕後隱藏,隱藏的同時顯示另外一個div,而在次彈出的div也有一個按鈕,點選後隱藏.

<button id="btn1" onclick="btn1()">報名</button>
<div id="div1" style="background:#999999; display:none;">
<button id="btn2" onclick="btn2()">第一個div</button>
</div>
<div id="div2" style="background:#666; display:none;">
<button id="btn3" onclick="btn3()">第二個div</button>
</div>


function btn1(){
    document.getElementById('div1').style.display='block'; 
}
function btn2(){
    document.getElementById('div1').style.display='none';//<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', arial, 宋體, sans-serif, tahoma; font-size: 14px; line-height: 24px;">display = "none"//隱藏div</span>
    document.getElementById('div2').style.display='block';<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', arial, 宋體, sans-serif, tahoma; font-size: 14px; line-height: 24px;">//display = "block"//顯示div</span>
}
function btn3(){
    document.getElementById('div2').style.display='none';  
}

採用jquery

<script src="jquery-1.8.3.js"></script>
 <body>
  <button id="btn1" onclick="btn1()">測試</button>
	<div id="div1" style="background:#999999; display:none;">
		<button id="btn2" onclick="btn2()">第一個div</button>
	</div>
	<div id="div2" style="background:#666; display:none;">
		<button id="btn3" onclick="btn3()">第二個div</button>
	</div>
 </body>
<script>
	function btn1(){
    $("#div1").show();
	$("#div2").show();
}
function btn2(){
    $("#div1").hide();
    $("#div2").show();
}
function btn3(){
    $("#div2").hide();  
	$("#div1").show();
}
</script>