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 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 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
如何给phpadmin一个保护
2006/10/09 PHP
phpwind中的数据库操作类
2007/01/02 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
六行python代码的爱心曲线详解
2019/05/17 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
python实现横向拼接图片
2020/03/23 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
优秀求职信范文分享
2014/01/26 职场文书
企业诚信承诺书
2014/05/23 职场文书
啤酒节策划方案
2014/05/28 职场文书
好人好事演讲稿
2014/09/01 职场文书
事业单位聘任报告
2015/03/02 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书