js如何实现点击div显示另一个div同时本div隐藏,有好几个div的,要怎么...
发布网友
发布时间：2022-05-12 07:25
我来回答
共2个回答
热心网友
时间：2022-04-23 11:17
<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，点我显示5，然后我隐藏</div>
<div>我是5，点我显示1，然后我隐藏</div>
</div>
<script>
window.onload=function(){
var divs=document.getElementById("box").getElementsByTagName("div");
divs[0].style.display="block";
for(var i=0;i<divs.length;i++){
divs[i].dataset["index"]=i;
divs[i].onclick=function(){
this.style.display="none";
var i=parseInt(this.dataset["index"]);
divs[(i+1)%divs.length].style.display="block";
}
}
}
</script>
热心网友
时间：2022-04-23 12:35
这个很简单啊，
$('div').click(function(){
if(!$(this).hasClass('on')){
$(this).addClass('on').siblings().removeClass('on');
$('.expert-on').eq($(this).index()).addClass('show').siblings().removeClass('show')
}
})追问哥讲解一下这段代码的意思呗
有点看不懂
追答这个是jq代码，首先你得引入jq,然后$('div')就像是document.getEmentById('id')获取节点的。click点击事件知道吧，下面的是判断如果this是指向当前，也就是说，点击谁就是指向谁。hasClass('on'))就是查询当前指向的div有没有on这个类。addClass('on')如果没有就给当前指向添加一个on,然后.siblings().removeClass('on');把它的兄弟节点的on都给移除。在css样式写一个.on{display: block;}这样就可以了，下面这一行不用写，这个是用来切换之后显示对于的内容的$('.expert-on').eq($(this).index()).addClass('show').siblings().removeClass('show')
js如何实现点击div显示另一个div同时本div隐藏,有好几个div的,要怎么...
然后我隐藏</div> <div>我是5，点我显示1，然后我隐藏</div></div><script>window.onload=function(){ var divs=document.getElementById("box").getElementsByTagName("div"); divs[0].style.display="block"; for(var i=0;i<divs.length;i++){ divs[i].dataset["inde...
js控制div显示隐藏实现(jquery控制div显示隐藏)
首先我们创建一个div，和一个按钮。用按钮的点击来控制div的显示或隐藏。02 添加一个样式名叫hide的样式，主要是设置display=none，即隐藏。03 接着用js来实现显示，隐藏的功能。我们用Jquery的hasClass方法来判断div是否有hide样式，有则删除这个样式，即显示div。如果没有，则添加一个hide的样式，即隐...
原生JS实现点击一个div隐藏或者显示另外一个div怎么写?
第一个div添加onclick()方法。方法里面代码如下：if(document.getElementById("B").style.display= ="none"){ //B是另一个div document.getElementById("B").style.display= "block";} else{ document.getElementById("B").style.display= "none";} <meta http-equiv="Content-Type...
点击按钮显示div内容在点击按钮显示另一个div内容用JS怎么写
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...
html 点击一个按钮 显示另一个div 隐藏之前呢个div(display属性,怎么用...
<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>显示这个<span>烦烦烦：<input type="text" name="jiqun" id="jiqun" value=""/> <a href=...
js点击一个div控制另一个div内容的显示与隐藏同时小图标也要切换状态...
border:1px solid #ddf}</style><div class="menu">显示/隐藏<i class="fa fa-edit"></i><i class="fa fa-chevron-circle-down"></i></div><div class="detail"> <div>详情1行</div> <div>详情2行</div> <div>详情3行</div></div><div class="menu">显示/隐藏<...
<大神>js如何实现点击一个按钮隐藏一个div,然后该div上有一个按钮,点击...
1、打开html开发软件，新建一个html文件。2、在html文件上创建一个button按钮，然后给这个按钮设置一个id，在案例中把按钮的id设置为show。3、然后创建一个隐藏的div，把需要隐藏的内容写到这个div上，然后给这个div设置一个id。4、给div设置隐藏的样式。在<title>标签后面为id为hide设置样式display:none...
如何实现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和...
点击一个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来回显示和隐藏
1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，然后按下Crtl+S保存一下：2、创建一个button按钮，给按钮设置一个id，名字设置为“myBT”，创建一个用来显示隐藏的div，将其id设置为“main”：3、给div和button设置一些样式，为了美观好看，这里无需设置display，因为默认就是显示的：4...
