js如何實現點選一個按鈕顯示一個div,然後該div上有一個按鈕,點選此按鈕後隱藏,隱藏的同時顯示另外一個div,而在次彈出的div也有一個按鈕,點選後隱藏.
阿新 • • 發佈:2019-01-22
<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>