javascript实现tab切换的两个实例
更新时间：2015年11月8日 20:27 点击：1820
上一篇《javascript实现tab切换的四种方法》中讲了tab切换的4种不同实现原理，那么，现在到理论联系实际的时候了，下面就写几个实例。
一、仿”中国人民大学“官网的tab切换，背景是图片，效果图如下：
鼠标移到新闻时的效果
鼠标移到公告时的效果
鼠标移到交流时的效果
学术、交流和文体的内容为空，我没有写。完整代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } body{ font-family: Arial,Verdana,sans-serif,"宋体"; } li{ list-style: none; float:left; } a{ text-decoration: none; color: #ffeec6; } #tanContainer{ height: 210px; width: 470px; background: url(homeinfo-trans-bg.png); overflow: hidden; color: #ffeec6; } #tanContainer li a{ height: 25px; display: inline-block; margin-left: 18px; font-size: 12px; padding-top: 12px; margin-bottom: 15px; } ul li a.fli { } #tabOne{ width: 122px; opacity: 0; } #tabTwo{ padding-left: 102px; } #tabCon { clear: both; } #tabCon p a{ color: #FFF2D5; } div div p{ font-size: 12px; margin: 10px 0 0 20px; width: 440px; } #bigPara{ font-size: 16px; color: #FFF2D5; border-bottom: 1px dotted #FFF2D5; padding-bottom: 5px; } #tabCon div { display:none; } #tabCon div.fdiv { display:block; } </style> </head> <body> <div id="tanContainer"> <div id="tab"> <ul> <li><a class="fli" href="#" id="tabOne">新闻</a></li> <li><a href="#" id="tabTwo">公告</a></li> <li><a href="#">学术</a></li> <li><a href="#">交流</a></li> <li><a href="#">文体</a></li> </ul> </div> <div id="tabCon"> <div class="fdiv"> <p id="bigPara"><a href="#">塞浦路斯总统尼科斯・阿纳斯塔西亚迪斯到访人民大学 获...</a></p> <p><a href="#" title="中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)">中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)</a></p> <p><a href="#">中国人民大学认真落实党风廉政建设主体责任和监督责任(2015-10-23)</a></p> <p><a href="#">中国人民大学第四届体育文化节开幕 2015年新生运动会举行(2015-10-18)</a></p> <p><a href="#">中国人民大学“一带一路”经济研究院首席顾问聘任仪式举行 土库曼斯坦驻华大使拉</a></p> </div> <div> <p><a>2015-2016学年第一学期第8周校领导接待日安排...(2015-10-22)</a></p> <p><a>关于举办中国人民大学第二届青年管理干部岗位技能竞赛的...(2015-09-30)</a></p> <p><a>我校第十六门中国大学视频公开课上线，请大家积极关注...(2015-10-26)</a></p> <p><a>关于组织我校青年教师参观鲁迅博物馆社会实践活动的通知...(2015-10-23)</a></p> <p><a>关于举办中国人民大学第四届教工羽毛球“1+1”团体联...(2015-10-23)</a></p> <p><a>中国人民大学MOOCs课程录制演播厅设备购置项目中标...(2015-10-23)</a></p> </div> <div>内容三</div> <div>内容四</div> <div>内容五</div> </div> </div> </body> <script> var tabs=document.getElementById("tab").getElementsByTagName("li"); var divs=document.getElementById("tabCon").getElementsByTagName("div"); for(var i=0;i<tabs.length;i++){ tabs[i].onmouseover=function(){change(this);} } function change(obj){ for(var i=0;i<tabs.length;i++){ if(tabs[i]==obj){ tabs[i].className="fli"; divs[i].className="fdiv"; if(i==0){ document.getElementById("tanContainer").style.backgroundPosition="0 0" }else{ document.getElementById("tanContainer").style.backgroundPosition="0 -210px" } }else{ tabs[i].className=""; divs[i].className=""; } } } </script> </html>此实例是很简单也很常见的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的选择框*/ } 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(x):checked的.panels .panel:nth-child(x)*/ .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>相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十：ECMAScript 5 增强的对象模型一文中，对于一段代码的调试出现了一个奇怪现象，现将源代码贴在下面： 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现，故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 复制代码 代码如下: //element:需要添加新样式的元素，value：新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 首先，我想到的是另建一个结果数组，用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较，检测是否重复。于是乎，我写出了如下代码A： Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，jQue...2014-06-07
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料，小编觉得这篇文章写的还不错，需要的朋友可以参考下，希望能够给你带来帮助...2021-11-10
- 有一道js面试题，题目是这样的：下列代码的执行结果是什么，为什么？ 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10，这道题主要考察JavaScript的逗...2015-03-15
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-03- 这篇文章主要介绍了Javascript类型转换的规则实例解析，涉及到javascript类型转换相关知识，对本文感兴趣的朋友一起学习吧...2016-02-27
- 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，Java...2015-10-23
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名，通过<object>标签里的id属性设定,如下； 复制...2014-06-07
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-20- 神马是“解释器模式”？先翻开《GOF》看看Definition：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念： 抽象语法树： 解释器模式并未解释如...2014-06-07