这是我的第一篇博客,可能有很多不足之处,希望大家给予指正,我会再接再厉
tab选项卡在生活中非常常见,它的实现原理也很简单,即选中一个选项,将显示该选项对应的内容。
如图:
Html代码:
在html部分,首先设置一个容器,即tab选项卡的宽高;其次设置tab选项卡选项部分,即图中的前三个div;然后设置内容部分,默认设置第一个选项对应的内容可见,同时隐藏后两个内容。
Css代码:
在该css部分主要设置了一些样式,用于tab选项卡的美化。
jQuery代码:
在该部分,我没有用javascript,因为jQuery隐式遍历的缘故,在遍历时,代码更加简便。核心代码就是,用户点击哪个选项,就将哪个选项对应的内容设置为可见,同时隐藏另外的选项对应的内容。
作者:曲明