您的位置：首页 > Web前端 > JavaScript

js如何实现点击一个按钮显示一个div，然后该div上有一个按钮，点击此按钮后隐藏，隐藏的同时显示另外一个div，而在次弹出的div也有一个按钮，点击后隐藏.

2016-07-14 17:09 1231 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航