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;
    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切换示例

一、仿”中国人民大学“官网的tab切换，背景是图片，效果图如下：

鼠标移到新闻时的效果


鼠标移到公告时的效果


鼠标移到交流时的效果


学术、交流和文体的内容为空，我没有写。完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
  *{
    padding: 0;
    margin: 0;
  }
  body{
    font-family: Arial,Verdana,sans-serif,"宋体";
  }
  li{
    list-style: none;
    float:left;
  }
  a{
    text-decoration: none;
    color: #ffeec6;
  }
  #tanContainer{
    height: 210px;
    width: 470px;
    background: url(homeinfo-trans-bg.png);
    overflow: hidden;
    color: #ffeec6;
  }
  #tanContainer li a{
    height: 25px;
    display: inline-block;
    margin-left: 18px;
    font-size: 12px;
    padding-top: 12px;
    margin-bottom: 15px;
  }
  ul li a.fli {
  }
  #tabOne{
    width: 122px;
    opacity: 0;
  }
  #tabTwo{
    padding-left: 102px;
  }
  #tabCon {
    clear: both;
  }
  #tabCon p a{
    color: #FFF2D5;
  }
  div div p{
    font-size: 12px;
    margin: 10px 0 0 20px;
    width: 440px;
  }
  #bigPara{
    font-size: 16px;
    color: #FFF2D5;
    border-bottom: 1px dotted #FFF2D5;
    padding-bottom: 5px;
  }
  #tabCon div {
    display:none;
  }
  #tabCon div.fdiv {
    display:block;
  }
</style>
</head>
<body>
  <div id="tanContainer">
    <div id="tab">
      <ul>
        <li><a class="fli" href="#" id="tabOne">新闻</a></li>
        <li><a href="#" id="tabTwo">公告</a></li>
        <li><a href="#">学术</a></li>
        <li><a href="#">交流</a></li>
        <li><a href="#">文体</a></li>
      </ul>
    </div>
    <div id="tabCon">
      <div class="fdiv">
        <p id="bigPara"><a href="#">塞浦路斯总统尼科斯·阿纳斯塔西亚迪斯到访人民大学 获...</a></p>
        <p><a href="#" title="中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)">中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)</a></p>
        <p><a href="#">中国人民大学认真落实党风廉政建设主体责任和监督责任(2015-10-23)</a></p>
        <p><a href="#">中国人民大学第四届体育文化节开幕 2015年新生运动会举行(2015-10-18)</a></p>
        <p><a href="#">中国人民大学“一带一路”经济研究院首席顾问聘任仪式举行 土库曼斯坦驻华大使拉</a></p>
      </div>
      <div>
        <p><a>2015-2016学年第一学期第8周校领导接待日安排...(2015-10-22)</a></p>
        <p><a>关于举办中国人民大学第二届青年管理干部岗位技能竞赛的...(2015-09-30)</a></p>
        <p><a>我校第十六门中国大学视频公开课上线，请大家积极关注...(2015-10-26)</a></p>
        <p><a>关于组织我校青年教师参观鲁迅博物馆社会实践活动的通知...(2015-10-23)</a></p>
        <p><a>关于举办中国人民大学第四届教工羽毛球“1+1”团体联...(2015-10-23)</a></p>
        <p><a>中国人民大学MOOCs课程录制演播厅设备购置项目中标...(2015-10-23)</a></p>
      </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].onmouseover=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";
      if(i==0){
        document.getElementById("tanContainer").style.backgroundPosition="0 0"
      }else{
        document.getElementById("tanContainer").style.backgroundPosition="0 -210px"
      }
  }else{
    tabs[i].className="";
    divs[i].className="";
    }
    }
  } 
</script>
</html>

此实例是很简单也很常见的tab切换，js中多了一点的就是改变了背景图片的位置，其他的就是简单的样式。

二、上一篇讲了不用js，用input:checked来实现tab切换效果，现在就用此原理加上css3做一个漂亮的实例，在切换的时候，内容区是渐现的。效果图如下：

鼠标点击HTML/CSS时的效果


鼠标点击AJAX时的效果


完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input:checked实现tab切换</title>
<style>
.tabs{
  color: #FFF;
  font-family: "微软雅黑";
}
input{
  opacity: 0;/*隐藏input的选择框*/
}
input:checked+label{
  padding-bottom: 6px;
  font-weight: bold;
}
label{
  cursor: pointer;/*鼠标移上去变成手状*/
  float: left;
  width: 120px;
  line-height: 40px;
  margin-right: 5px;
  text-align: center;
}
.tabs label:nth-of-type(1){
  background: #5eb0de;
}
.tabs label:nth-of-type(2){
  background: #86cad7;
}
.tabs label:nth-of-type(3){
  background: #e9bab3;
}
.tabs label:nth-of-type(4){
  background: #a8c194;
}
label:hover{
  font-weight: bold;
}
/*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
.tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1){
  opacity: 1;
  background: #5eb0de;
  -webkit-transition: .3s;
}
.tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
  opacity: 1;
  background: #86cad7;
  -webkit-transition: .3s;
}
.tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3){
  opacity: 1;
  background: #e9bab3;
  -webkit-transition: .3s;
}
.tabs input:nth-of-type(4):checked~.panels .panel:nth-child(4){
  opacity: 1;
  background: #a8c194;
  -webkit-transition: .3s;
}
.panel{
  opacity: 0;
  position: absolute;/*使内容区域位置一样*/
  height: 200px;
  width: 455px;
  margin-top: 25px;
  padding: 0 20px;
}
</style>
</head>
<body>
  <div class="tabs">
      <input checked id="one" name="tabs" type="radio">
      <label for="one">HTML/CSS</label>
      <input id="two" name="tabs" type="radio">
      <label for="two">JavaScript</label>
      <input id="three" name="tabs" type="radio">
      <label for="three">AJAX</label>
      <input id="four" name="tabs" type="radio">
      <label for="four">Sever Side</label>
      <div class="panels">
        <div class="panel">
          <h2>HTML文本标签语言</h2>
          <p>HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习！你会喜欢它的！</p>
        </div>
        <div class="panel">
          <h2>JavaScript脚本语言</h2>
          <p>JavaScript 是世界上最流行的脚本语言。<br/>
             JavaScript 是属于 web 的语言，它适用于PC、笔记本电脑、平板电脑和移动电话。<br/>
             JavaScript 被设计为向 HTML 页面增加交互性。
          </p>
        </div>
        <div class="panel">
          <h2>AJAX阿贾克斯</h2>
          <p>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。<br/>
          AJAX 不是新的编程语言，而是一种使用现有标准的新方法。<br/>
          AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
          </p>
        </div>
        <div class="panel">
        <h2>Sever Side服务器脚本</h2>
          <p>SQL 是用于访问和处理数据库的标准的计算机语言。<br/>
          ASP 是创建动态交互性网页的强大工具。<br/>
          ADO 指 ActiveX 数据对象（ActiveX Data Objects）。<br/>
          PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。<br/>
          VBScript 是微软公司出品的脚本语言。
          </p>
        </div>
      </div>
  </div>
</body>
</html>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索框架
， 代码
事件
angularjs实现tab切换、css实现tab标签切换、js实现tab选项卡切换、jquery实现tab切换、vue实现tab切换，以便于您获取更多的相关知识。

时间： 2024-10-03 14:58:24

tab切换实现的几种方法及示例的相关文章

jquery实现网站列表切换效果的2种方法_jquery

本文实例为大家分享了jquery实现网站列表切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 效果图: <html> <head> <meta charset="utf-8" /> <title>网站品牌列表切换效果</title> <style> *{ margin: 0px; padding: 0px; } a{ color: black; text-decoration: none; } a:hov

javascript的tab切换原理与效果实现方法

 具体实现方法如下:    代码如下: <html> <head> <style type="text/css"> #container{border:solid 1px green;width:300px;height:300px;} li{float:left;margin-left:20px;} p{float:left;} #sports,#military,#bbs{display:none;} </style> <scr

ASP.NET中读取XML文件信息的4种方法与示例代码_实用技巧

方法一 :使用XML控件 <% @ Page Language="C#"%> <html> <body>          <h3><font face="Verdana">读取XML方法一</font></h3>        <from runat=server>         <asp:Xml id="xml1" DocumentSour

让win7实现3D切换页面效果的3种方法

鉴于这帖蛮多人看的,我解释一下不能切换的原因: 1.没有aero特效,或禁用aero的,无法实现3D切换(普通家庭版没aero功能) 2.桌面主题若选择"基本和高对比主题",也将自动禁用aero. 还有,本方法绿色健康,无副作用 一.使用快捷键 按住win(Ctrl键旁边)+Tab,再按一次Tab即可切换,或者用鼠标滚轮切换 二.使用快捷方式(以前深度论坛看到的,在某种情况下挺实用的) 1,在桌面中单击右键新建一个"快捷方式" 2,在"请键入项目的位置&q

javascript实现tab切换的四种方法_javascript技巧

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:

让Windows7实现3D切换页面效果的3种方法

用过Windows7系统3D切换页面效果用户都有这样的感觉,一个字"炫",如下图: 看到网上不少人反映不能实现3D切换页面效果,在这里本站小编为大家解释一下其中的原因: 1.没有aero特效,或禁用aero的,无法实现3D切换(普通家庭版没aero功能) 2.桌面主题若选择"基本和高对比主题",也将自动禁用aero. Windows7实现3D切换页面效果方法 一.使用快捷键实现3D切换页面效果 按住win(Ctrl键旁边)+Tab,再按一次Tab即可切换,或者用鼠标

flex界面切换有几种方法？

问题描述 初学Flex,从接触到的书籍和资料没有查到怎么进行复杂布局的方法,只看到用state一个方法,但一个大应用不可能把所有界面都堆在一个mxml了吧,请问各位大侠有哪些方法可以复杂布局,或者说多个mxml之间怎么配合.问题补充:今天看了多模块之间可以用<mx:module>连接到*.swf来解决界面切换的问题,可以多个swf之间怎么维持会话,比如如果用户知道swf之间的关系的话,可以直接访问改swf而不用通过权限控制系统. 解决方案 在flex中切换界面很简单大致有以下方式1.viewS

jQuery简单tab切换效果实现方法

 本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript ty

在Hibernate里面动态切换SChema实现访问不同的数据库的几种方法

需求很简单,相同的操作,比如表结构完全相同,程序也完全相同,但需要根据某些条件,分别向不同的schema做操作. 比如,如果当前处理的是A公司,那么向SchemaA 里面保存数据,如果当前处理的是B公司的,则向SchemaB里面保存数据. 其实就是一套程序,实现后台的动态切换. 我这里提供几种方法,大家自己根据情况考虑,都能实现,注意是实现,不一定适合于正式应用. 方法一: 在Hibernate里面,有一个配置参数,比如下面这个带Schema配置的映射 <?xml version="1.0