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. TOMCAT加载两次war包（重复加载）

    一.问题描述 项目中通过配置Context节点docBase,使docBase指向项目的绝对路径,可以直接通过IP加端口访问,今日发现意外bug,项目中某个功能奇数次执行成功,偶数次执行失败.二.问题 ...

  2. How to enable Google Play App Signing

    how to enable google play app signing  ------------------------------------------------------------- ...

  3. java List.add操作可以指定位置

    java List.add操作可以指定位置,addAll也可以指定: 使用: public class Test02 { public static void main(String[] args) ...

  4. Cookies 初识 Dotnetspider EF 6.x、EF Core实现dynamic动态查询和EF Core注入多个上下文实例池你知道有什么问题？ EntityFramework Core 运行dotnet ef命令迁移背后本质是什么？（EF Core迁移原理）

    Cookies   1.创建HttpCookies Cookie=new HttpCookies("CookieName");2.添加内容Cookie.Values.Add(&qu ...

  5. linux redis tmp redis 安装

    Redis https://redis.io/download yum install make gcc gcc-c++ openssl-devel zlib-devel -y; wget tar - ...

  6. Android开发之接收系统广播消息

    BroadcastReceiver除了接收用户所发送的广播消息之外.另一个重要的用途:接收系统广播. 假设应用须要在系统特定时刻运行某些操作,就能够通过监听系统广播来实现.Android的大量系统事件 ...

  7. ios32---线程的状态

    // // ViewController.m // 04-了解-线程的状态 // // 创建线程是处于新建状态,start是就绪状态,会放入到可调度线程池里面(cpu看线程是否可以调用,是看线程是否在 ...

  8. ARM+llinux系统移植3G拨号上网收发短信（二）【转】

    本文转载自:http://blog.csdn.net/hanmengaidudu/article/details/17099749 一.发送text格式的短信 给联通发text格式的短信: ~ > ...

  9. iOS10 优化APP首次安装网络权限提示方案

    我刚经历了一场末日(停电),特别是在你想写文档的时候... 言归正传,今天的问题是解决iOS10系统下首次按钮APP弹出的网络权限提示所带来了问题以及优化. 起因 查了相关文章知道由于大陆工信部出台的 ...

  10. [Codeforces 666B] World Tour

    [题目链接] https://codeforces.com/contest/666/problem/B [算法] 首先 , 用BFS求出任意两点的最短路径 然后 , 我们用f[i][0-2]表示从i出 ...