作者:手机用户2602933853 | 来源:互联网 | 2022-06-27 09:13
上一篇《Javascript实现tab切换的四种方法》中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例。
一、仿”中国人民大学“官网的tab切换,背景是图片,效果图如下:
鼠标移到新闻时的效果
鼠标移到公告时的效果
鼠标移到交流时的效果
学术、交流和文体的内容为空,我没有写。完整代码如下:
此实例是很简单也很常见的tab切换,js中多了一点的就是改变了背景图片的位置,其他的就是简单的样式。
二、用input:checked来实现tab切换效果,现在就用此原理加上css3做一个漂亮的实例,在切换的时候,内容区是渐现的。效果图如下:
鼠标点击HTML/CSS时的效果
鼠标点击AJAX时的效果
完整代码如下: