点击按钮显示div内容在点击按钮显示另一个div内容用JS怎么写

 我来答
与无忧
推荐于2018-08-18
知道答主
回答量:23
采纳率:0%
帮助的人:21.8万
展开全部
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会更简单
数都信息
2024-09-29 广告
上海数都信息科技有限公司是一家科技型的设计公司,团队深耕企业品牌设计服务已有十余年,已助力多家企业塑造其品牌形象及体验,服务内容含:LOGO设计/VI设计/产品包装设计/导视店面门头及空间设计,吉祥物设计/海报设计等。 我们的目标是帮助小微... 点击进入详情页
本回答由数都信息提供
长城郭靖
2014-06-04 · TA获得超过729个赞
知道小有建树答主
回答量:1090
采纳率:47%
帮助的人:385万
展开全部
display:block;display:none
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式