html5/css/js,照片墙和单击触发事件功能实现

时间:2024-03-31 07:18:14

js简单的for循环应用于点击页面图片触发内容改变事件

页面左边是照片墙,右边是内容模块,点击照片墙的照片,内容模块发生改变

原始页面

html5/css/js,照片墙和单击触发事件功能实现

点击照片后

html5/css/js,照片墙和单击触发事件功能实现

html5/css/js,照片墙和单击触发事件功能实现

js代码

//获取元素
var img=document.getElementById('imgs')//注意啊,这里get的是定义了Id的元素,如果你get的是定义了class的元素是不行的,会报错Cannot read property '0' of undefined",因为后面的index索引是根据id来找到元素的
var a=img.children
var con=document.getElementsByClassName('right')//这个才是get的classname的
  for(var i=2;i<5;i++){

//        给每个元素自定义一个属性 储存值,注册单击事件,

                //这第一个循环从2开始是页面需求,请忽略,按你的实际情况来就行

      a[i].index = i//注意,将当前i值赋予index索引,最后一行index索引根据这个找到对应的注册事件,进行操作,这里注意i的起始值,应使设置的i值有与之对应的k值
      a[i].onclick = function () {
// 样式设置为block
           for(var k = 0;k<5;k++){
               con[k].style.display = 'none'
           }
           con[this.index].style.display = 'block'
       }

   }

简单的十来行代码吧,就是先在html中设置除第一个内容模块外的内容模块display:none,然后在js中用两个for循环把全部的内容模块先 display:none,找到单击对象再把对应的内容模块设置为了display:block,捣鼓了好一阵子,没办法,小白嘛,实现了功能就贼开心,请多指教,希望帮助到你。

HTML结构(一共有五张照片但暂只设置了三个有内容的div内容模块,就是说有两张照片的触发事件是没有内容的,有兴趣的同学自行补上自己玩玩哈)

html5/css/js,照片墙和单击触发事件功能实现

照片墙

html5/css/js,照片墙和单击触发事件功能实现html5/css/js,照片墙和单击触发事件功能实现

html5/css/js,照片墙和单击触发事件功能实现