javascript实现tab切换的两个实例_javascript技巧-js教程-PHP中文网

上一篇《javascript实现tab切换的四种方法》中讲了tab切换的4种不同实现原理，那么，现在到理论联系实际的时候了，下面就写几个实例。

一、仿”中国人民大学“官网的tab切换，背景是图片，效果图如下：

鼠标移到新闻时的效果

鼠标移到公告时的效果

鼠标移到交流时的效果

学术、交流和文体的内容为空，我没有写。完整代码如下：

 
 
 
 
 
 
  
 
 
 
 
 新闻
 公告
 学术
 交流
 文体
 
 
 
 
 塞浦路斯总统尼科斯·阿纳斯塔西亚迪斯到访人民大学 获...
 中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)
 中国人民大学认真落实党风廉政建设主体责任和监督责任(2015-10-23)
 中国人民大学第四届体育文化节开幕 2015年新生运动会举行(2015-10-18)
 中国人民大学“一带一路”经济研究院首席顾问聘任仪式举行 土库曼斯坦驻华大使拉
 
 
 
 2015-2016学年第一学期第8周校领导接待日安排...(2015-10-22)
 关于举办中国人民大学第二届青年管理干部岗位技能竞赛的...(2015-09-30)
 我校第十六门中国大学视频公开课上线，请大家积极关注...(2015-10-26)
 关于组织我校青年教师参观鲁迅博物馆社会实践活动的通知...(2015-10-23)
 关于举办中国人民大学第四届教工羽毛球“1+1”团体联...(2015-10-23)
 中国人民大学MOOCs课程录制演播厅设备购置项目中标...(2015-10-23)
 
 内容三
 内容四
 内容五

登录后复制

此实例是很简单也很常见的tab切换，js中多了一点的就是改变了背景图片的位置，其他的就是简单的样式。

二、用input:checked来实现tab切换效果，现在就用此原理加上css3做一个漂亮的实例，在切换的时候，内容区是渐现的。效果图如下：

鼠标点击HTML/CSS时的效果

鼠标点击AJAX时的效果

完整代码如下：

 
 
 
 
 input:checked实现tab切换
 
 
  
 
 
 
 HTML/CSS
 
 
 JavaScript
 
 
 AJAX
 
 
 Sever Side
 
 
 
 HTML文本标签语言
 HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习！你会喜欢它的！
 
 
 
 JavaScript脚本语言
 JavaScript 是世界上最流行的脚本语言。

 JavaScript 是属于 web 的语言，它适用于PC、笔记本电脑、平板电脑和移动电话。

 JavaScript 被设计为向 HTML 页面增加交互性。
 
 

 
 AJAX阿贾克斯
 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
 
 
 
 
 Sever Side服务器脚本
 SQL 是用于访问和处理数据库的标准的计算机语言。

 ASP 是创建动态交互性网页的强大工具。

 ADO 指 ActiveX 数据对象（ActiveX Data Objects）。

 PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。

 VBScript 是微软公司出品的脚本语言。