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

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

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

原始页面

点击照片后

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内容模块，就是说有两张照片的触发事件是没有内容的，有兴趣的同学自行补上自己玩玩哈）

照片墙