xq的H5学习之实现div的隐藏和显示切换

        在做H5的课程设计时学到了不少在课堂上老师没有讲到的实例，现在想将这些实例记录下来，为了将来在开发的过程中能有一份实例进行参考。

        在制作网页的过程中如何实现点击按钮或者连接实现内容的转变？或许第一个想到的是写很多个HTML，但是这个方法会导致HTML文件过多。以下是个人总结的两种方法：

1.利用jQuery实现

        利用jQuery实现需要连接jQuery的插件库，即固定的js文件。

        首先在这里先将创建三个div，每个div的背景颜色都不同。其次再创建三个链接，也可用按钮等实现切换。

div及链接的代码

再利用css设置div的背景颜色。在css中，需要将div设置为绝对定位元素，使其三个div元素重叠。

css的布局

    最后是jQuery代码，当点击链接是jQuery代码自动寻找到相应元素进行隐藏和显示。

jQuery代码

实例如下图：

由于没有设置div的先后顺序，所以浏览器默认为第三个div在前面。若想将其顺序更改，可在css中添加z-index的属性，其数值越大，顺序越靠前。

2.利用JavaScript实现

        利用jQuery实现需要连接其插件库，若还没有学习到jQuery的小伙伴可以考虑用JavaScript实现。HTML的布局与上面的描述一致，只需修改JavaScript的代码即可。

需添加的HTML代码

JavaScript代码

    此文章为本人原创，仅限于本人的学习总结记录，若有错误之处请留言提出。