js如何实现点击div显示另一个div同时本div隐藏,有好几个div的,要怎么循环使用

 我来答
网海1书生
科技发烧友

2019-02-19 · 擅长软件设计、WEB应用开发、小程序
网海1书生
采纳数:12311 获赞数:26228

向TA提问 私信TA
展开全部
<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>
o归隐情缘o
2019-02-19 · 而我在远途,在帷幕。所以君不见,卿不遇!
o归隐情缘o
采纳数:618 获赞数:691

向TA提问 私信TA
展开全部
这个很简单啊,
$('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')
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式