点击按钮显示div内容在点击按钮显示另一个div内容用JS怎么写
发布网友
发布时间：2022-04-23 09:57
我来回答
共2个回答
热心网友
时间：2022-05-14 15:53
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会更简单
热心网友
时间：2022-05-14 17:11
display:block;display:none
点击按钮显示div内容在点击按钮显示另一个div内容用JS怎么写
//方法一:将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;} } //方法二:用...
如何用js点击一个div来显示另外一个div
<div onclick="showOtherDiv()" style="border:1px solid #fff">点击显示另一个div</div><div id="otherDiv" style="display:none;border:1px solid red">点击后显示的div</div><script type="text/javascript">function showOtherDiv(){//获取要显示的div对象var otherDiv=document.getEleme...
点击按钮弹出一个div,再点击按钮或点击其他区域关闭该div,javascript代 ...
//点击按钮弹出div 在点击按钮关闭该div 按钮.onclick=function(){ if(div.style.display=="none"){ div.style.display="block";} else { div.style.display="none";} } //点击其他地方关闭div document.onclick=function(){ div.style.display="none";} //为了防止点击div 也关闭div 所以...
点击一个div,另一个div做出对应反应,用js
function(a) { // 点击 #click div click_divs[a].onclick = function() { // #show div 全部隐藏 for(var x = 0; x < show_divs.length; x++) { show_divs[x].style.display = "none"; } // 对应 #show div 显示 show_divs[a].style....
html 点击一个按钮 显示另一个div 隐藏之前呢个div(display属性,怎么用...
}else{ show1.style.display = 'none';show2.style.display='block';} } </script> <input type="button" value="点击" id="btn" onclick="show(t1);"/> <div id="t1" style="display:block"><h3>隐藏这个</h3></div> <div id="t2" style="display:none"> <h3>显示这个<...
点击一个div图层,在其上面弹出另一个div图层,用js怎么实现
两个div 先写好,一个先隐藏,点击后更改其属性,让其显示 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .outer{ position: relative; height: 300px; width: 500px; background-color: #097df3; } .d1...
js如何实现点击div显示另一个div同时本div隐藏,有好几个div的,要怎么...
<style>#box div{width:200px; height:30px; margin:10px; background-color:#edd; display:none}</style><div id="box"> <div>我是1，点我显示2，然后我隐藏</div> <div>我是2，点我显示3，然后我隐藏</div> <div>我是3，点我显示4，然后我隐藏</div> <div>我是4...
js控制div显示隐藏实现?
1、首先，打开html编辑器，新建一个html文件，例如：index.html。2、在index.html文件的script标签中，写入js：('button').click(function(){ ('div').hide();('div').eq(parseInt(3*Math.random())).show();});3、浏览器运行index.html页面，此时点击btn按钮总会显示其中1个div和隐藏另外2...
怎样获取div内容,并在同一个页面的另一个div里显示?
先纠正您的错误，id不能用数字开头，要用字母或下划线开头，即改为：<div id=a1>这里显示id=2的内容</div> <div id=a2>div2显示内容</div> <script type="text/javascript"> //JS直接实现 function opt(){ document.getElementById("a2").innerHTML=document.getElementById("a1").innerHTML...
...切换显示但怎么能让首次进入的时候只显示一个div
思路：两个div先都写好，一个现实，一个隐藏，当点击时，让另一个现实，当前隐藏就好了。下面是简单的实现方式，仅提供思路。<body > <input type="button" id="btn" value="click me" /> <div style ="width:100px; height:100px; background:red; display:block; " id ="div1"...
