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. hdu - 1429 胜利大逃亡(续) (bfs状态压缩)

    http://acm.hdu.edu.cn/showproblem.php?pid=1429 终于开始能够做状态压缩的题了,虽然这只是状态压缩里面一道很简单的题. 状态压缩就是用二进制的思想来表示状态 ...

  2. 洛谷 P1404 平均数

    P1404 平均数 题目描述 给一个长度为n的数列,我们需要找出该数列的一个子串,使得子串平均数最大化,并且子串长度>=m. 输入输出格式 输入格式: N+1行, 第一行两个整数n和m 接下来n ...

  3. 【CV论文阅读】Unsupervised deep embedding for clustering analysis

    Unsupervised deep embedding for clustering analysis 偶然发现这篇发在ICML2016的论文,它主要的关注点在于unsupervised deep e ...

  4. CLLocation的属性以及使用的解释

    http://blog.csdn.net/u012496940/article/details/47405345  上一篇的链接(一个定位实例) 从上一篇中的实例了解所使用的一些元素: CLLcati ...

  5. AE After Effect 如何分段渲染

    如果只要第一段的话,你把要输出的那段首尾处分别按下B键和N键,这样输出时就会只输出这一段了(拖动首尾的栏目修改起始和终止的时间):如果是批量渲染的话你只要在这些不同的合成层里,每个按下ctrl+M键, ...

  6. 网页瞬间转换成桌面应用级程序（IOS/Win/Linux）

    首先下载node,并且安装. 安装检测 检测完成后,执行下面这条命令 npm i -g nativefier 安装完成后 执行下面的命令+网址即可生成任意的桌面级程序 示例:nativefier &q ...

  7. Trie树（Prefix Tree）介绍

    本文用尽量简洁的语言介绍一种树形数据结构 -- Trie树. 一.什么是Trie树 Trie树,又叫字典树.前缀树(Prefix Tree).单词查找树 或 键树,是一种多叉树结构.如下图: 上图是一 ...

  8. 我和nupt集训队的故事

    纯水文,如有不适请ctrl+w撤离 亚洲赛刚结束.看了不少巨巨的退役贴以及岛娘在知乎上的那篇感天动地的人生经历.多少有点夜深忽梦少年事的错觉.作为一个两年前就打出gg的高龄选手,之后又强行以1次队员和 ...

  9. C++之new和malloc差别

         在C++程序猿面试中.非常easy被问到new 和 malloc的差别.偶尔在quora上逛.看到Robert Love的总结.才发现自己仅仅知道里面的一两项就沾沾自喜,从来没有像这位大牛一 ...

  10. Codeforces Round #319 (Div. 2) C. Vasya and Petya's Game 数学题

                                                     C. Vasya and Petya's Game                           ...