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做的一个随机点名程序
Feb 13 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
js实现查询商品案例
Jul 22 Javascript
Javascript数组及类数组相关原理详解
Oct 29 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文件读写操作相关函数总结
2014/11/18 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
构造器Constructor是否可被override?
2013/08/06 面试题
给排水工程师岗位职责
2013/11/21 职场文书
模具毕业生推荐信
2014/02/15 职场文书
小学开学典礼主持词
2014/03/19 职场文书
年终总结会主持词
2014/03/25 职场文书
工会换届选举方案
2014/05/21 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python