欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript实现tab切换的两个实例_javascript技巧

程序员文章站 2022-04-14 10:17:05
...
上一篇《javascript实现tab切换的四种方法》中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例。

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

鼠标移到新闻时的效果

javascript实现tab切换的两个实例_javascript技巧

鼠标移到公告时的效果

javascript实现tab切换的两个实例_javascript技巧

鼠标移到交流时的效果

javascript实现tab切换的两个实例_javascript技巧

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

 
 
 
 
 
 

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

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

鼠标点击HTML/CSS时的效果

javascript实现tab切换的两个实例_javascript技巧

鼠标点击AJAX时的效果

javascript实现tab切换的两个实例_javascript技巧

完整代码如下:

 
 
 
 input:checked实现tab切换

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 是微软公司出品的脚本语言。