在CSS HTML JavaScript中单击可更改图片的Hexagon

我不熟悉CSS HTML和JavaScrip。 我发现这段代码用于创建带有图片的六边形图案（请参见第一段代码）。当我按下一个六边形时，我希望它的图片变成另一张图片（参见第二个代码）

第一个代码：下面是JavaScript、CSS和HTML

//我不知道我的java脚本会是怎样的

/**
*使用CSS3（SO）-1元素/六边形生成重复六边形图案！！！
* http://stackoverflow.com/q/10062887/1397351
*/
* {
框大小：边框框；
保证金：0；
填充：0；
}
.行{
利润率：-18%0；
文本对齐：居中；
}
.第一排：第一个孩子{
利润率最高：-20%；
}
.六边形{
位置：相对位置；
显示：内联块；
溢出：隐藏；
利润率：0.8.5%；
填充：16%；
变换：旋转（30度）倾斜（30度）scaleX（.866）；
/*.866=sqrt（3）/2*/
}
.hexagon:之前，
.内容：之后{
显示：块；
位置：绝对位置；
/*86.6%=（sqrt（3）/2）*100%=.866*100%*/
最高：6.7%；
右：0；
底部：6.7%；
左：0；
/* 6.7% = (100% -86.6%)/2 */
变换：scaleX（1.155）歪斜（-30度）旋转（-30度）；
/*1.155=2/sqrt（3）*/
背景色：rgba（30144255.56）；
背景尺寸：封面；
内容：''；
}
t:之后{
内容：attr（数据内容）；
}
.行：第一个孩子。六边形：第一个孩子：之前{
背景图片：url(http://s10.postimg.org/o0vmcz3hl/Untitled_2_0.jpg);
}
.行：第n个子（2）.六边形：第n个子（2）：前{
背景图片：url(http://s10.postimg.org/n7j0kcxgp/Untitled_2_0.jpg);
}
.行：第n个孩子（3）.六边形：第一个孩子：之前{
背景图片：url(http://s10.postimg.org/pen98a2qx/Untitled_2_0.jpg);
}
.行：第n个子（4）.六边形：第n个子（2）：前{
背景图片：url(http://s10.postimg.org/ivuevcqjt/Untitled_2_0.jpg);
}
.行：第n个子（2）.六边形：第一个子：之前{
背景图片：url(http://s10.postimg.org/dvwynekx5/Untitled_2_0.jpg);
}
.行：第n个孩子（4）.六边形：第一个孩子：之前{
背景图片：url(http://s10.postimg.org/7ak8nn52h/Untitled_2_0.jpg);
}
.行：第n个孩子（5）.六边形：第一个孩子：之前{
背景图片：url(http://s10.postimg.org/i7lkceru1/Untitled_2_0.jpg);
}

结果：

我添加了一个新类.hexagon hide（与.hexagon相同，但具有不同的背景图像），然后我添加了JQuery函数，通过单击hexagon div在.hexagon和.hexagon hide之间切换

$（“.hexagon”）。单击（函数（）{
$（this.toggleClass（'hexagon hide'）；
});
/**
*使用CSS3（SO）-1元素/六边形生成重复六边形图案！！！
* http://stackoverflow.com/q/10062887/1397351
*/
* {
框大小：边框框；
保证金：0；
填充：0；
}
.行{
利润率：-18%0；
文本对齐：居中；
}
.第一排：第一个孩子{
利润率最高：-20%；
}
.hexagon，.hexagon隐藏{
位置：相对位置；
显示：内联块；
溢出：隐藏；
利润率：0.8.5%；
填充：16%；
变换：旋转（30度）倾斜（30度）scaleX（.866）；
/*.866=sqrt（3）/2*/
}
.hexagon:之前，.hexagon隐藏：之前，
.内容：之后{
显示：块；
位置：绝对位置；
/*86.6%=（sqrt（3）/2）*100%=.866*100%*/
最高：6.7%；
右：0；
底部：6.7%；
左：0；
/* 6.7% = (100% -86.6%)/2 */
变换：scaleX（1.155）歪斜（-30度）旋转（-30度）；
/*1.155=2/sqrt（3）*/
背景色：rgba（30144255.56）；
背景尺寸：封面；
内容：''；
}
t:之后{
内容：attr（数据内容）；
}
.行：第一个孩子。六边形：第一个孩子：之前{
背景图片：url(http://s10.postimg.org/o0vmcz3hl/Untitled_2_0.jpg);
}
.行：第n个子（2）.六边形：第n个子（2）：前{
背景图片：url(http://s10.postimg.org/n7j0kcxgp/Untitled_2_0.jpg);
}
.行：第n个孩子（3）.六边形：第一个孩子：之前{
背景图片：url(http://s10.postimg.org/pen98a2qx/Untitled_2_0.jpg);
}
.行：第n个子（4）.六边形：第n个子（2）：前{
背景图片：url(http://s10.postimg.org/ivuevcqjt/Untitled_2_0.jpg);
}
.行：第n个子（2）.六边形：第一个子：之前{
背景图片：url(http://s10.postimg.org/dvwynekx5/Untitled_2_0.jpg);
}
.行：第n个孩子（4）.六边形：第一个孩子：之前{
背景图片：url(http://s10.postimg.org/7ak8nn52h/Untitled_2_0.jpg);
}
.行：第n个孩子（5）.六边形：第一个孩子：之前{
背景图片：url(http://s10.postimg.org/i7lkceru1/Untitled_2_0.jpg);
}
.row:第一个孩子。六边形隐藏：第一个孩子：之前{
背景图像：url（“http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.行：第n个子对象（2）.六边形隐藏：第n个子对象（2）：之前{
背景图像：url（“http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.行：第n个子项（3）.六边形隐藏：第一个子项：之前{
背景图像：url（“http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.行：第n个子对象（4）.六边形隐藏：第n个子对象（2）：之前{
背景图像：url（“http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.行：第n个子对象（2）.六边形隐藏：第一个子对象：之前{
背景图像：url（“http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.行：第n个子项（4）.六边形隐藏：第一个子项：之前{
背景图像：url（“http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.行：第n个子项（5）.六边形隐藏：第一个子项：之前{
背景图像：url（“http://s27.postimg.org/qqz5ww52r/red_4.jpg）；}

但是当我在linux计算机上使用它时，在我将index.php文件放入/var/www之后，我得到了页面，但按钮不起作用？你知道为什么吗？我不明白你的评论。我试图通过打开HTML文件在我的web浏览器中运行代码。我得到了图片和所有东西，但是javaScript文件似乎不起作用。你包括jquery了吗？