时间:2021-05-26
上一篇《javascript实现tab切换的四种方法》中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例。
一、仿”中国人民大学“官网的tab切换,背景是图片,效果图如下:
鼠标移到新闻时的效果
鼠标移到公告时的效果
鼠标移到交流时的效果
学术、交流和文体的内容为空,我没有写。完整代码如下:
此实例是很简单也很常见的tab切换,js中多了一点的就是改变了背景图片的位置,其他的就是简单的样式。
二、用input:checked来实现tab切换效果,现在就用此原理加上css3做一个漂亮的实例,在切换的时候,内容区是渐现的。效果图如下:
鼠标点击HTML/CSS时的效果
鼠标点击AJAX时的效果
完整代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input:checked实现tab切换</title> <style> .tabs{ color: #FFF; font-family: "微软雅黑"; } input{ opacity: 0; } input:checked+label{ padding-bottom: 6px; font-weight: bold; } label{ cursor: pointer; float: left; width: 120px; line-height: 40px; margin-right: 5px; text-align: center; } .tabs label:nth-of-type(1){ background: #5eb0de; } .tabs label:nth-of-type(2){ background: #86cad7; } .tabs label:nth-of-type(3){ background: #e9bab3; } .tabs label:nth-of-type(4){ background: #a8c194; } label:hover{ font-weight: bold; } .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1){ opacity: 1; background: #5eb0de; -webkit-transition: .3s; } .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){ opacity: 1; background: #86cad7; -webkit-transition: .3s; } .tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3){ opacity: 1; background: #e9bab3; -webkit-transition: .3s; } .tabs input:nth-of-type(4):checked~.panels .panel:nth-child(4){ opacity: 1; background: #a8c194; -webkit-transition: .3s; } .panel{ opacity: 0; position: absolute; height: 200px; width: 455px; margin-top: 25px; padding: 0 20px; } </style> </head> <body> <div class="tabs"> <input checked id="one" name="tabs" type="radio"> <label for="one">HTML/CSS</label> <input id="two" name="tabs" type="radio"> <label for="two">JavaScript</label> <input id="three" name="tabs" type="radio"> <label for="three">AJAX</label> <input id="four" name="tabs" type="radio"> <label for="four">Sever Side</label> <div class="panels"> <div class="panel"> <h2>HTML文本标签语言</h2> <p>HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习!你会喜欢它的!</p> </div> <div class="panel"> <h2>JavaScript脚本语言</h2> <p>JavaScript 是世界上最流行的脚本语言。<br/> JavaScript 是属于 web 的语言,它适用于PC、笔记本电脑、平板电脑和移动电话。<br/> JavaScript 被设计为向 HTML 页面增加交互性。 </p> </div> <div class="panel"> <h2>AJAX阿贾克斯</h2> <p>AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。<br/> AJAX 不是新的编程语言,而是一种使用现有标准的新方法。<br/> AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。 </p> </div> <div class="panel"> <h2>Sever Side服务器脚本</h2> <p>SQL 是用于访问和处理数据库的标准的计算机语言。<br/> ASP 是创建动态交互性网页的强大工具。<br/> ADO 指 ActiveX 数据对象(ActiveX Data Objects)。<br/> PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。<br/> VBScript 是微软公司出品的脚本语言。 </p> </div> </div> </div> </body> </html>声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
近期要做一个含有两个tab切换页面,两个页面有公共的描述信息区域,两个tab都是listview,可以向上或向下拉动刷新,在页面中部有一个tab切换区域,向上滑
样例近期要做一个含有两个tab切换页面,两个页面有公共的描述信息区域,两个tab都是listview,可以向上或向下拉动刷新,在页面中部有一个tab切换区域,向
Windows系统切换两个窗口间或多个窗口间切换的快捷键是:alt加tab键;Mac系统切换两个窗口间或多个窗口间切换的快捷键是:commnd加tab键。 M
Windows系统切换两个窗口间或多个窗口间切换的快捷键是:alt+tab键;Mac系统切换两个窗口间或多个窗口间切换的快捷键是:commnd+tab键。 计
本文实例讲述了javascript的tab切换原理与效果实现方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:#container{border: