上一篇《论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. hdu - 1195 Open the Lock (bfs) && hdu 1973 Prime Path (bfs)

    http://acm.hdu.edu.cn/showproblem.php?pid=1195 这道题虽然只是从四个数到四个数,但是状态很多,开始一直不知道怎么下手,关键就是如何划分这些状态,确保每一个 ...

  2. 创建Django项目（七）——表单

    2013-08-15 19:43:01|         1.URL配置和视图 "blog\urls.py"文件中:添加url(r'write_article/$', 'write ...

  3. 2017-10-01-afternoon

    T1 一道图论好题(graph) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK有一张无向图G={V,E},这张无向图有n个点m条边组成.并且这是一张带 ...

  4. Ubuntu 16.04设置rc.local开机启动命令/脚本的方法（通过update-rc.d管理Ubuntu开机启动程序/服务）

    注意:rc.local脚本里面启动的用户默认为root权限. 一.rc.local脚本 rc.local脚本是一个Ubuntu开机后会自动执行的脚本,我们可以在该脚本内添加命令行指令.该脚本位于/et ...

  5. [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

    Using Object Oriented Programming, OOP, style allows us to apply Inversion of Control, IoC, and more ...

  6. [Debug] Inspect and Style an Element in DevTools that Normally Disappears when Inactive

    It’s handy to inspect an element in your browser’s DevTools when you need to experiment or tweak it’ ...

  7. C#的SplitPanel如何设置上下和左右

    定位到Orientation属性即可

  8. 【前端】JavaScript继承实现的四种方式

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/4770235.html 一.继承的实现方法 1.原型链继承 这个继承最为简单,它的实现原理是,每一个AO对象都有一 ...

  9. 为何被主流抛弃-江西IDC机房价格为何居高不下缺少竞争力-2014年5月江西IDC排行榜

     经常有人问江西IDC排行榜,为什么江西市场缺乏活力. 榜单调研者们有时仅仅能表示无解和无奈. 在IDC领域,其实已经形成了一二三线的城市之分. 一线城市是以上海.北京.深圳为代表的拥有最早国际宽 ...

  10. Wget下载多个链接

    需要wget下载多个文件链接时,可以采用如下方法: 1. 将链接存入文件url.list中: 2. wget -bc -i url.list -o [log_file] -P [target_dir] ...