基于jQuery实现标签页切换的小功能

写在前面:

作为一个初入前端行业的小白,只是想将平时练习做的一些实用小功能分享出来,可能代码有时不是特别简洁,但代表了我自己的一些逻辑和思路。

功能介绍:

开发网页时经常会用到标签页切换的功能,点击链接时切换页面,如简图:

                                                   基于jQuery实现标签页切换的小功能_第1张图片

                                                    基于jQuery实现标签页切换的小功能_第2张图片

布局思路:

             1、顶部横排四个链接按钮通过ul>li*4实现,设置css样式为float:left(要注意解决ul的高度塌陷问题);

             2、内容区为四个div构成,通过定位使其重叠。

布局代码:

                                     基于jQuery实现标签页切换的小功能_第3张图片


CSS样式代码:

                                    基于jQuery实现标签页切换的小功能_第4张图片

                                    基于jQuery实现标签页切换的小功能_第5张图片

 (CSS样式设置就不多说了,可能有些地方设置的不是那么完美,请见谅~)       

JS代码:             

             基于jQuery实现标签页切换的小功能_第6张图片

(啊。。。注释是当时写代码的时候怕朋友看不懂,所以加上去的,纯属自己的理解与思路,如果理解有偏差,请指教~)


第一次记录博客,小紧张。

                                                                                

你可能感兴趣的:(javascript,jQuery,jquery,标签页切换,前端)