视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript实现tab切换的两个实例_javascript技巧
2020-11-27 21:45:13 责编:小采
文档
 上一篇《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文本标签语言

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

    下载本文
    显示全文
    专题