javascript实现tab切换的四种方法


Posted in Javascript onNovember 05, 2015

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>

现在的显示效果如下图:

javascript实现tab切换的四种方法

四个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>

该方法的缺点是,不同区域切换只能通过点击。

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是为大家总结的tab切换实现方法,希望对大家的学习有所帮助,顺着这个思路动手制作自己tab切换特效。

Javascript 相关文章推荐
jQuery对表单的操作代码集合
Apr 06 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
JS常用函数使用指南
Nov 23 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
浅谈JavaScript作用域
Dec 06 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 #Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 #Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 #Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 #Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 #Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 #Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 #Javascript
You might like
用 php 编写的日历
2006/10/09 PHP
如何删除多级目录
2006/10/09 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
JQuery控制Radio选中方法分析
2015/05/29 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Django values()和value_list()的使用
2020/03/31 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
报关简历自我评价怎么写
2013/09/19 职场文书
会计专业应届生求职信
2013/11/24 职场文书
篝火晚会主持词
2014/03/25 职场文书
组工干部对照检查材料
2014/08/25 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
班主任培训研修日志
2015/11/13 职场文书
《我的长生果》教学反思
2016/02/20 职场文书