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 Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
Node.js简单入门前传
Aug 21 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
函数式编程入门实践(一)
Apr 20 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php绘制圆形的方法
2015/01/24 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
python遍历数组的方法小结
2015/04/30 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
python属于哪种语言
2020/08/16 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
内容编辑个人求职信
2013/12/10 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers