tab切换在网页中很常见，故最近总结了4种实现方法。

　　首先，写出tab的框架，加上最简单的样式，代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style>

   *{

     padding: 0;

     margin: 0;

   }

   li{

     list-style: none;

     float:left;

   }

   #tabCon{

     clear: both;

   }

 </style>

 </head>

 <body>

   <div id="tanContainer">

     <div id="tab">

       <ul>

         <li>标题一</li>

         <li>标题二</li>

         <li>标题三</li>

         <li>标题四</li>

       </ul>

     </div>

     <div id="tabCon">

       <div>内容一</div>

       <div>内容二</div>

       <div>内容三</div>

       <div>内容四</div>

     </div>

   </div>

 </body>

 </html>

　　现在的显示效果如下图：

　　四个tab标题和四个内容区都显示在了页面中，现在要实现tab切换效果，即点击标题一，内容一显示出来，其他内容不显示；点击标题二，内容二显示出来，其他内容不显示……

　　那么，整体思路很简单，给四个标题绑定事件，触发的时候对应的内容显示，其他的内容隐藏。

　　方法一：点击标题对应的内容显示，非点击标题对应的内容隐藏。代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style>

   *{

       padding: 0;

       margin: 0;

   }

   li{

       list-style: none;

   }

 </style>

 <script>

   function tab(pid){

       var tabs=["tab1","tab2","tab3","tab4"];

       for(var i=0;i<4;i++){

         if(tabs[i]==pid){

             document.getElementById(tabs[i]).style.display="block";

         }else{

             document.getElementById(tabs[i]).style.display="none";

         }

       }

   }

 </script>

 </head>

 <body>

   <div id="tanContainer">

       <div id="tabNav">

       <ul>

           <li onclick="tab('tab1')">标题一</li>

           <li onclick="tab('tab2')">标题二</li>

           <li onclick="tab('tab3')">标题三</li>

           <li onclick="tab('tab4')">标题四</li>

       </ul>

       </div>

       <div id="tab">

         <div id="tab1">内容一</div>

         <div id="tab2">内容二</div>

         <div id="tab3">内容三</div>

         <div id="tab4">内容四</div>

       </div>

   </div>

 </body>

 </html>

　　方法二：先设置所有内容隐藏，然后点击标题对应的内容显示。代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style>

   *{

     padding: 0;

     margin: 0;

   }

   li{

     list-style: none;

     float:left;

   }

   #tabCon{

     clear: both;

   }

   #tabCon_1{

     display: none;

   }

   #tabCon_2{

     display: none;

   }

   #tabCon_3{

     display: none;

   }

 </style>

 <script>

   function changeTab(tabCon_num){

     for(i=0;i<=3;i++) {

       document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏

     }

       document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层

   }

 </script>

 </head>

 <body>

   <div id="tanContainer">

     <div id="tab">

       <ul>

         <li onclick="changeTab('0')">标题一</li>

         <li onclick="changeTab('1')">标题二</li>

         <li onclick="changeTab('2')">标题三</li>

         <li onclick="changeTab('3')">标题四</li>

       </ul>

     </div>

     <div id="tabCon">

       <div id="tabCon_0">内容一</div>

       <div id="tabCon_1">内容二</div>

       <div id="tabCon_2">内容三</div>

       <div id="tabCon_3">内容四</div>

     </div>

   </div>

 </body>

 </html>

　　方法三：显示和隐藏通过是有拥有class控制，先把所有的内容隐藏dispaly设为none，而该class的display设置为block，遍历所有标题节点和内容节点，点击标题后，该标题节点和对用的内容节点拥有class，其他的没有。代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style>

   *{

     padding: 0;

     margin: 0;

   }

   li{

     list-style: none;

     float:left;

   }

   #tabCon {

     clear: both;

   }

   #tabCon div {

     display:none;

   }

   #tabCon div.fdiv {

     display:block;

   }

 </style>

 </head>

 <body>

   <div id="tanContainer">

     <div id="tab">

       <ul>

         <li class="fli">标题一</li>

         <li>标题二</li>

         <li>标题三</li>

         <li>标题四</li>

       </ul>

     </div>

     <div id="tabCon">

       <div class="fdiv">内容一</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].onclick=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";

   }else{

     tabs[i].className="";

     divs[i].className="";

     }

     }

   }

 </script>

 </html>

　　该方法的缺点是，内容块的div下面不能再有div标签了。

　　方法四：不用js，用“input:checked”来做tab切换，先把所有的内容隐藏，被选中的内容显示。代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>input:checked实现tab切换</title>

 <style>

 input{

   opacity: 0;/*隐藏input的选择框*/

 }

 label{

   cursor: pointer;/*鼠标移上去变成手状*/

   float: left;

 }

 label:hover{

   background: #eee;

 }

 input:checked+label{

   color: red;

 }

 /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/

 .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1),

 .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){

   opacity: 1;

 }

 .panel{

   opacity: 0;

   position: absolute;/*使内容区域位置一样*/

 }

 </style>

 </head>

 <body>

   <div class="tabs">

       <input checked id="one" name="tabs" type="radio">

       <label for="one">标题一</label>

       <input id="two" name="tabs" type="radio">

       <label for="two">标题二</label>

       <div class="panels">

         <div class="panel">

           <p>内容一</p>

         </div>

         <div class="panel">

           <p>内容二</p>

         </div>

       </div>

   </div>

 </body>

 </html>

　　改方法的缺点是，不同区域切换只能通过点击。

论tab切换的几种实现方法的更多相关文章

  1. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  2. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  3. tab切换的两种方法

    方法一.主要使用了传递参数的思想,把循环变量不能使用转换了一下<!DOCTYPE html><html lang="en"><head> < ...

  4. tab切换webuploader失效的解决方法

    <script type="text/javascript"> $(document).ready(function () { $('#tt').tabs({ bord ...

  5. 几个不同的tab切换示例

    上一篇<论tab切换的几种实现方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿”中国人民大学“官网的tab切换,背景是图片,效果图如下 ...

  6. 关于scrollintoview()真的是有意思极了，结合普通tab切换一起看看

    scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...

  7. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  8. jquery另外一种类似tab切换效果

    简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...

  9. javascript实现选项卡切换的4种方法

    方法一:for循环+if判断当前点击与自定义数组是否匹配 <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. [bzoj1430]小猴打架_prufer序列

    小猴打架 bzoj-1430 题目大意:题目链接. 注释:略. 想法: 我们发现打架的情况就是一棵树. 我们只需要把确定树的形态然后乘以$(n-1)!$表示生成这棵树时边的顺序. 一共$n$个节点我们 ...

  2. COLLECTL LINUX 监控

    http://blog.csdn.net/leichelle/article/details/23590289

  3. 使用URL Rewrite实现网站伪静态

    下载urlwrite包 将urlrewrite-***.jar复制到web应用lib文件夹下 web.xml中配置URL Rewrite: 例: <filter> <filter-n ...

  4. Elasticsearch学习系列之多文档操作mget

    测试数据 GET /library/books/1 { "_index": "library", "_type": "books& ...

  5. Redis学习笔记3-Redis5个可运行程序命令的使用

    在redis安装文章中,说到安装好redis后,在/usr/local/bin下有5个关于redis的可运行程序.以下关于这5个可运行程序命令的具体说明. redis-server Redisserv ...

  6. DataNucleus之JDO操作演示样例

    JDO(Java Data Object )是Java对象持久化的新的规范.也是一个用于存取某种数据仓库中的对象的标准化API. 注意JDO是一种规范,而不是一个产品.而DataNucleus正是实现 ...

  7. jQuery -&gt; 获取指定上下文中的DOM元素

    jQuery函数的第二个參数能够指定DOM元素的搜索范围. 第二个參数可分为下面类型 DOM reference jQuery wrapper document 代码演示样例 <!DOCTYPE ...

  8. HDU 1226 超级password

    跟POJ 1465 multiple 类是.仅仅只是多了2个条件,长度不能超过500.还有就是 可能不是十进制. bfs+同余定理,就是用 mod 来判重. G++ 15ms 每次枚举一位,然后记录下 ...

  9. Android 代码设置Activity 背景透明

    当指定Activity 样式 Them.Dialog 时候 又不同意用XML 设置 Activity 的背景颜色的时候 用代码 this.getWindow().getDecorView().setB ...

  10. redux 调试工具

    首先安装谷歌插件: redux-devtools 然后项目中安装插件:redux-devtools-extension 最后在创建 store 的时候进行配置: import { composeWit ...