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. NTKO在线office控件使用实例

    目录 1. NTKO在线office控件使用实例 1.1. 基础介绍 1.2. 基本原理 1.3. 实例 1.3.1. 打开.保存部分代码 1.3.2. 动态设值 1. NTKO在线office控件使 ...

  2. C#代码读写XML

    <1> 创建XML文档 using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  3. SaltStack学习系列之state常用模块

    常用模块:cron,cmd,file,mount,ntp,pkg,service,user,group cmd模块 参数: name:要执行的命令 unless:用于检查的命令,只有unless指向的 ...

  4. php 获取今天，本周，本月，三个月内，半年内，今年的开始和结束时间

    $now = time();         //今天        $today_audit_num = 0;        $today_use_num = 0;        $beginTim ...

  5. mysql数据库批量高速插入

    近期在处理一批数据,须要从库中表里的字段进行处理然后导出到一个新表中.只是这个表的数据量有近500w条. 这数据量出现的的问题是须要处理的时间好长. 首先想到,一句一句的插入,大数据量处理时间好长,忽 ...

  6. ios7 UIBarButtonItem 默认蓝色

    [self.navigationItem setLeftBarButtonItem:leftButton]; 这样设置在ios7上button默认是蓝色 解决方法: leftButton.tintCo ...

  7. iOS平台加入Google Admob -1/2（Unity3D开发之七）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com.谢谢! 原文地址: http://www.cocos2dev.com/?p=567 Unity调用iOS还是非 ...

  8. NTFS文件系统的单个文件最大到底有多大？

    于NTFS文件系统的单个文件最大到底有多大? 闲来无事突然想到这个问题,到网上搜索了一下也没有一个固定的解释. 于是到微软官方知识库去寻找答案: 注意:基础硬件限制可能会对任何文件系统施加额外的分区大 ...

  9. ios23--动画做弹出提示框toast

    ) { /* [UIView animateWithDuration:2.0 animations:^{ // 执行动画 self.showHUB.text = @"当前购物车已空,赶紧买买 ...

  10. 使用Oracle Sql Developer将SQL SERVER 2008数据库移植到Oracle 11g

    ORACLE官方提供的Sql Developer自带的Oracle Migration Workbench. 什么是Oracle SQL Developer?在官方页面上,是这样介绍它的: Oracl ...