上一篇《论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中多了一点的就是改变了背景图片的位置，其他的就是简单的样式。

二、上一篇讲了不用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>

几个不同的tab切换示例的更多相关文章

  1. iOS开发之多表视图滑动切换示例（仿"头条"客户端）---优化篇

    前几天发布了一篇iOS开发之多表视图滑动切换示例(仿"头条"客户端)的博客,之所以写这篇博客,是因为一位iOS初学者提了一个问题,简单的写了个demo做了个示范,让其在基础上做扩展 ...

  2. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  3. WPF案例（－）模拟Windows7 Win+Tab切换

    原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...

  4. 原生JS实现tab切换--web前端开发

    tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...

  5. bootstrap 标签页tab切换js（含报错原因）

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  6. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

  7. CSS3属性之 target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> < ...

  8. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

随机推荐

  1. 思科CISCO 交换机命名规则

      思科交换机的命名规则要比路由的命名规则复杂, 看下这些:WS-C2960-24TC-L .WS-C2950G-24-EI-DC .WS-C2960-24TT-L .WS-C3750G-24TS-E ...

  2. 图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性

    1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...

  3. #!/usr/bin/env 脚本解释程序的作用

    the Zimbu programming language http://www.zimbu.org/getting-started -------------------------------- ...

  4. Android 实现形态各异的双向側滑菜单 自己定义控件来袭

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39670935.本文出自:[张鸿洋的博客] 1.概述 关于自己定义控件側滑已经写了 ...

  5. java入门之——对象转型

    对象的类型转换是我们在编程的时候常常会遇到的,java平台也是如此.比方一些基本类型的数据转型和复合数据的转换. 举例 java语言中主要分为向上转型和向下转型,怎样来了解和掌握这两者转型的关系呢?首 ...

  6. C#如何发布项目 发布软件

    如下图所示,我随便搞了一个小软件,为了测试还在Debug目录下放了一个一副图片和一个LOGO   直接点击生成-发布 "软件名称",然后点击完成   结果报错说没找到SignToo ...

  7. Growth: 一个关于怎样成为优秀Web Developer 的 App

    想了想还是决定在今天公布一个预览版.这样才干持续改进.Growth是一个关于怎样成为优秀的Web Developer的APP--结合技能树.成长路线图.进阶书单.Web七日谈以及一些小測验. 它是我对 ...

  8. 创建一个Cordova完整应用

    本文承接上篇<创建Cordova插件>,通过实现一个简单的应用作为这个Cordova0基础系列的结束. 前边对Cordova编程已经讲了不少了.还没有拿真实应用为例完整的演练一遍构建过程. ...

  9. Codeforces Round #228 (Div. 2) C. Fox and Box Accumulation

    C. Fox and Box Accumulation time limit per test 1 second memory limit per test 256 megabytes input s ...

  10. Codesys——AD_DA在PID控制中的作用

    1. 摘要 PID控制中用到AD/DA的输入/输出,给出其大致实现思路. 2. 思路 3. 总结 无