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. [bzoj3306]树_dfs序_线段树_倍增lca

    树 bzoj-3306 题目大意:给定一颗n个节点的树,支持换根.修改点权.查询子树最小值. 注释:$1\le n,q\le 10^5$. 想法: 如果没有换根操作,就是$dfs$序+线段树维护区间最 ...

  2. Git回退---reset和revert

    今天学习了git回退的两个命令,现在总结一下: 1.git reset 如果想回退错误的提交C和D,只要把指针移到B上 git reset --hard a0fvf8 而这时候,远程仓库的指针还在D上 ...

  3. MongoDB小结04 - update【$inc】

    update方法很强大,它有两个参数,一是查询文档,用来找出需要更新的文档,另一个是修改器(modifier)文档,描述对找到的文档做哪些修改. 亮点 更新操作是原子的,若两个更新同时发生,先到达服务 ...

  4. 使用Post方法模拟登陆爬取网页(转)

    使用Post方法模拟登陆爬取网页   最近弄爬虫,遇到的一个问题就是如何使用post方法模拟登陆爬取网页.下面是极简版的代码: import java.io.BufferedReader; impor ...

  5. laravel 邮件

    本文使用qq邮箱 env邮件配置: MAIL_FROM_ADDRESS = 17******92@qq.com MAIL_FROM_NAME = listen~ MAIL_DRIVER=smtp MA ...

  6. seajs入门使用

    使用 Sea.js 进行模块化开发还能够带来非常多优点: 模块的版本号管理. 通过别名等配置,配合构建工具,能够比較轻松地实现模块的版本号管理. 提高可维护性.模块化能够让每一个文件的职责单一,很有利 ...

  7. Linux挂载新盘

    Linux 系统挂载数据盘 1.查看数据盘 使用“fdisk-l”命令查看 2. 对数据盘进行分区 执行“fdisk /dev/sdb”命令,对数据盘进行分区: 输入“n”,“p”“1”,两次回车,“ ...

  8. C# .NET using ManagementObjectSearcher提示缺少引用怎么办

    在下图中,即使引用了System.Management还是会出现报错   其实只要添加这条引用就可以了

  9. js 获取文件本地路径

    1.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  10. openstack-glance-api.service start request repeated too quickly, refusing to start

    问题描写叙述 openstack J版 centos7部署 重新启动服务时起不来,日志也不报错.以glance服务为例,例如以下: # systemctl start openstack-glance ...