写在前面:
作为一个初入前端行业的小白,只是想将平时练习做的一些实用小功能分享出来,可能代码有时不是特别简洁,但代表了我自己的一些逻辑和思路。
功能介绍:
开发网页时经常会用到标签页切换的功能,点击链接时切换页面,如简图:
布局思路:
1、顶部横排四个链接按钮通过ul>li*4实现,设置css样式为float:left(要注意解决ul的高度塌陷问题);
2、内容区为四个div构成,通过定位使其重叠。
布局代码:
CSS样式代码:
(CSS样式设置就不多说了,可能有些地方设置的不是那么完美,请见谅~)
JS代码:
(啊。。。注释是当时写代码的时候怕朋友看不懂,所以加上去的,纯属自己的理解与思路,如果理解有偏差,请指教~)
第一次记录博客,小紧张。