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

Posted 2023-04-06

<style>
#box divwidth: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>

参考技术A 这个很简单啊，
$('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样式写一个.ondisplay: block;这样就可以了，下面这一行不用写，这个是用来切换之后显示对于的内容的$('.expert-on').eq($(this).index()).addClass('show').siblings().removeClass('show')

js如何实现：在页面中任意位置点击鼠标，则在该位置显示一个div

rt
就是div的左上角与鼠标指针点击位置重合
如果改成点击的是图片 是不是会简单些？....求大神指教

1、先在一个文件目录下创建四个html文件，分别为index.html、page1.html、page2.html、page3.html。

2、接着用可编辑文本文件的软件打开四个html文件。如图先在index.html中加入三个div。

3、接着如图编写js代码，使得点击指定div后跳转指定页面。

4、其他三个html文件只是简单显示一下信息，三个文件的内容如图。

5、编辑完后，用浏览器打开index.html文件，结果如图。

6、点击第一个div，效果如图。

7、点击第二个div，效果如图。这样就成功用js实现点击指定div后跳转到指定页面了。

参考技术A

如下参考：

1.页面复制有一个id为c2的div，下面有一个子div，下面有一个按钮，事件是用来点击100个adddiv。

2.在event函数中，定义一个内容为degreediv字符的字符串变量。

3.然后使用jquery的append将已知的div字符串添加到c2div，如下所示。

4.运行页面，现在只看到一个div，如下图所示。

5.单击下面的按钮来触发添加div的逻辑，如下所示。

参考技术B

“leave_领悟”的回答思路是正确的，但是没有达到div左上角与鼠标指针点击位置重合的效果，其实只需要为新创建的div加上绝对定位即可，下面是修改后的代码，供楼主参考：

<script type="text/javascript">
window.onload=function()
    document.onmousedown=function(ev)
        var oEvent=ev||event;
        var oDiv=document.createElement('div');
        oDiv.style.left=oEvent.clientX+'px';  // 指定创建的DIV在文档中距离左侧的位置
        oDiv.style.top=oEvent.clientY+'px';  // 指定创建的DIV在文档中距离顶部的位置
        oDiv.style.border='1px solid #FF0000'; // 设置边框
        oDiv.style.position='absolute'; // 为新创建的DIV指定绝对定位
        oDiv.style.width='200px'; // 指定宽度
        oDiv.style.height='200px'; // 指定高度
        document.body.appendChild(oDiv); 
    

</script>

本回答被提问者采纳 参考技术C

 像下面这样：

<script>
window.onload=function()
    document.onmousedown=function(ev)
        var oEvent=ev||event;
        var oDiv=document.createElement('div');
        oDiv.style.left=oEvent.clientX+'px';    
        oDiv.style.top=oEvent.clientY+'px';    
        document.body.appendChild(oDiv); 
      
  
</script>

参考技术D 哈哈哈哈哈哈