点击按钮显示div内容在点击按钮显示另一个div内容用JS怎么写?
展开全部
html部分:
<input type="button" value="显示div1的内容" id="btn" />
<div id="div1" style="display:none">div1</div>
<div id="div2" style="display:none">div2</div>
<div id="show-box"></div>
js部分
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var btn=document.getElementById("btn");
var showBox=document.getElementById("show-box");
//方法一:将div中的值赋值到一个用于显示的框中(showBox)
var flag=true;
btn.onclick=function(){
if(flag){
showBox.innerHTML=div1.innerHTML;
btn.value="显示div2的内容"
flag=false;
}
else{
showBox.innerHTML=div2.innerHTML;
btn.value="显示div1的内容"
flag=true;
}
}
//方法二:用按钮控制div1,div2的显示隐藏
var flag=true;
btn.onclick=function(){
if(flag){
div1.style.display="block";
div2.style.display="none";
btn.value="显示div2的内容"
flag=false;
}
else{
div2.style.display="block";
div1.style.display="none";
btn.value="显示div1的内容"
flag=true;
}
}
因为不太明白你想要哪种,所以写了两种,你选一个吧~
ps:其实用JQuery会更简单
<input type="button" value="显示div1的内容" id="btn" />
<div id="div1" style="display:none">div1</div>
<div id="div2" style="display:none">div2</div>
<div id="show-box"></div>
js部分
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var btn=document.getElementById("btn");
var showBox=document.getElementById("show-box");
//方法一:将div中的值赋值到一个用于显示的框中(showBox)
var flag=true;
btn.onclick=function(){
if(flag){
showBox.innerHTML=div1.innerHTML;
btn.value="显示div2的内容"
flag=false;
}
else{
showBox.innerHTML=div2.innerHTML;
btn.value="显示div1的内容"
flag=true;
}
}
//方法二:用按钮控制div1,div2的显示隐藏
var flag=true;
btn.onclick=function(){
if(flag){
div1.style.display="block";
div2.style.display="none";
btn.value="显示div2的内容"
flag=false;
}
else{
div2.style.display="block";
div1.style.display="none";
btn.value="显示div1的内容"
flag=true;
}
}
因为不太明白你想要哪种,所以写了两种,你选一个吧~
ps:其实用JQuery会更简单
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询