首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

几种tab切换详解

Posted in Javascript onFebruary 03, 2017

1.鼠标移入移出切换

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切换</title>
 <style type="text/css">
 * {padding: 0;margin: 0;}
 li {list-style: none;}
 .wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 1140px;
 }
 .tabbox {
 margin: 40px auto;
 width: 400px;
 height: 200px;
 border: 1px solid #f70;
 overflow: hidden;

 }
 .tabbox .tab-tit{
 position: relative;
 height: 40px;
 }
 ul {
 position: absolute;
 left: -1px;
 width: 401px;
 height: 40px;
 line-height: 40px;
 background-color: #eaeaea;
 }
 ul li {
 float: left;
 border-left: 1px solid #f70;
 border-bottom: 1px solid #f70;
 text-align: center;
 width: 99px;
 height: 40px;
 overflow: hidden;
 }
 .clear {clear: both;}
 .select {
 padding-right: 1px;
 border-bottom: none;
 background-color: #fff;
 }
 a:link, a:visited {
 font-size: 16px;
 font-weight: bold;
 color: #888;
 text-decoration: none;
 }
 .select a {
 color: #333;
 }
 a:hover, a:active {
 color: #f20;
 font-weight: bold;
 }
 .tab-txt {
 width: 400px;
 padding: 40px;
 overflow: hidden;
 }
 .demo {display: none;}
 .tab-txt p {
 line-height: 40px;
 }
 </style>
</head>
<body>
 <div class="wrapper">
 <div id="tabBox" class="tabbox">
 <div id="tabTit" class="tab-tit">
 <ul>
 <li class="select"><a href="javascript:;">女枪</a></li>
 <li><a href="javascript:;">提莫</a></li>
 <li><a href="javascript:;">盖伦</a></li>
 <li><a href="javascript:;">剑圣</a></li>
 </ul>
 </div>
 <!-- <div class="clear"></div> -->
 <div id="tabTxt" class="tab-txt">
 <div class="demo" style="display: block;">
 <p>我有两把枪，一把叫射，另一把叫，啊~</p>
 <p>你有一双迷人的眼睛，我非常喜欢！</p>
 </div>
 <div class="demo">
 <p>我去前面探探路</p>
 <p>提莫队长正在待命！</p>
 </div>
 <div class="demo">
 <p>放马过来吧，你会死的很光荣的！</p>
 <p>快点儿结束吧，我头有点儿转晕了……</p>
 </div>
 <div class="demo">
 <p>我的剑就是你的剑。</p>
 <p>眼睛多，看东西才会更加清楚</p>
 </div>
 </div>
 </div>
 </div>
 <script type="text/javascript">
 function $(id) {
 return typeof id === "string" ? document.getElementById(id) : id;
 }
 window.onload = function() {
 var tits = $("tabTit").getElementsByTagName("li");
 var txts = $("tabTxt").getElementsByClassName("demo");
 if(tits.length != txts.length) {return;}
 for(var i=0,l=tits.length; i<l; i++) {
 tits[i].id = i;
 tits[i].onmouseover = function() {
 for(var j=0; j<l; j++) {
 tits[j].className = "";
 txts[j].style.display = "none";
 }
 this.className = "select";
 txts[this.id].style.display = "block";
 }
 }
 }
 </script>
</body>
</html>

2.鼠标移入移出延时切换

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切换之延时切换</title>
 <style type="text/css">
 * {padding: 0;margin: 0;}
 li {list-style: none;}
 .wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 1140px;
 }
 .tabbox {
 margin: 40px auto;
 width: 400px;
 height: 200px;
 border: 1px solid #f70;
 overflow: hidden;
 }
 .tabbox .tab-tit{
 position: relative;
 height: 40px;
 }
 ul {
 position: absolute;
 left: -1px;
 width: 401px;
 height: 40px;
 line-height: 40px;
 background-color: #eaeaea;
 }
 ul li {
 float: left;
 border-left: 1px solid #f70;
 border-bottom: 1px solid #f70;
 text-align: center;
 width: 99px;
 height: 40px;
 overflow: hidden;
 }
 .clear {clear: both;}
 .select {
 padding-right: 1px;
 border-bottom: none;
 background-color: #fff;
 }
 a:link, a:visited {
 font-size: 16px;
 font-weight: bold;
 color: #888;
 text-decoration: none;
 }
 .select a {
 color: #333;
 }
 a:hover, a:active {
 color: #f20;
 font-weight: bold;
 }
 .tab-txt {
 width: 400px;
 padding: 40px;
 overflow: hidden;
 }
 .demo {display: none;}
 .tab-txt p {
 line-height: 40px;
 }
 </style>
</head>
<body>
 <div class="wrapper">
 <div id="tabBox" class="tabbox">
 <div id="tabTit" class="tab-tit">
 <ul>
 <li class="select"><a href="javascript:;">女枪</a></li>
 <li><a href="javascript:;">提莫</a></li>
 <li><a href="javascript:;">盖伦</a></li>
 <li><a href="javascript:;">剑圣</a></li>
 </ul>
 </div>
 <!-- <div class="clear"></div> -->
 <div id="tabTxt" class="tab-txt">
 <div class="demo" style="display: block;">
 <p>我有两把枪，一把叫射，另一把叫，啊~</p>
 <p>你有一双迷人的眼睛，我非常喜欢！</p>
 </div>
 <div class="demo">
 <p>我去前面探探路</p>
 <p>提莫队长正在待命！</p>
 </div>
 <div class="demo">
 <p>放马过来吧，你会死的很光荣的！</p>
 <p>快点儿结束吧，我头有点儿转晕了……</p>
 </div>
 <div class="demo">
 <p>我的剑就是你的剑。</p>
 <p>眼睛多，看东西才会更加清楚</p>
 </div>
 </div>
 </div>
 </div>
 <script type="text/javascript">
 function $(id) {
 return typeof id === "string" ? document.getElementById(id) : id;
 }
 window.onload = function() {
 var timer = null;
 var tits = $("tabTit").getElementsByTagName("li");
 var txts = $("tabTxt").getElementsByClassName("demo");
 if(tits.length != txts.length) {return;}
 for(var i=0,l=tits.length; i<l; i++) {
 tits[i].id = i;
 tits[i].onmouseover = function() {
 var that = this;
 if(timer) {
 clearTimeout(timer);
 timer = null;
 }
 timer = setTimeout(function() {
 for(var j=0; j<l; j++) {
  tits[j].className = "";
  txts[j].style.display = "none";
 }
 that.className = "select";
 txts[that.id].style.display = "block";
 },500);
 } 
 }
 }
 </script>
</body>
</html>

3. tab自动切换，鼠标移入移出立即切换

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切换之自动切换</title>
 <style type="text/css">
 * {padding: 0;margin: 0;}
 li {list-style: none;}
 .wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 1140px;
 }
 .tabbox {
 margin: 40px auto;
 width: 400px;
 height: 200px;
 border: 1px solid #f70;
 overflow: hidden;
 }
 .tabbox .tab-tit{
 position: relative;
 height: 40px;
 }
 ul {
 position: absolute;
 left: -1px;
 width: 401px;
 height: 40px;
 line-height: 40px;
 background-color: #eaeaea;
 }
 ul li {
 float: left;
 border-left: 1px solid #f70;
 border-bottom: 1px solid #f70;
 text-align: center;
 width: 99px;
 height: 40px;
 overflow: hidden;
 }
 .clear {clear: both;}
 .select {
 padding-right: 1px;
 border-bottom: none;
 background-color: #fff;
 }
 a:link, a:visited {
 font-size: 16px;
 font-weight: bold;
 color: #888;
 text-decoration: none;
 }
 .select a {
 color: #333;
 }
 a:hover, a:active {
 color: #f20;
 font-weight: bold;
 }
 .tab-txt {
 width: 400px;
 padding: 40px;
 overflow: hidden;
 }
 .demo {display: none;}
 .tab-txt p {
 line-height: 40px;
 }
 </style>
</head>
<body>
 <div class="wrapper">
 <div id="tabBox" class="tabbox">
 <div id="tabTit" class="tab-tit">
 <ul>
 <li class="select"><a href="javascript:;">女枪</a></li>
 <li><a href="javascript:;">提莫</a></li>
 <li><a href="javascript:;">盖伦</a></li>
 <li><a href="javascript:;">剑圣</a></li>
 </ul>
 </div>
 <!-- <div class="clear"></div> -->
 <div id="tabTxt" class="tab-txt">
 <div class="demo" style="display: block;">
 <p>我有两把枪，一把叫射，另一把叫，啊~</p>
 <p>你有一双迷人的眼睛，我非常喜欢！</p>
 </div>
 <div class="demo">
 <p>我去前面探探路</p>
 <p>提莫队长正在待命！</p>
 </div>
 <div class="demo">
 <p>放马过来吧，你会死的很光荣的！</p>
 <p>快点儿结束吧，我头有点儿转晕了……</p>
 </div>
 <div class="demo">
 <p>我的剑就是你的剑。</p>
 <p>眼睛多，看东西才会更加清楚</p>
 </div>
 </div>
 </div>
 </div>
 <script type="text/javascript">
 function $(id) {
 return typeof id === "string" ? document.getElementById(id) : id;
 }
 window.onload = function() {
 var index = 0;
 var timer = null;
 var tits = $("tabTit").getElementsByTagName("li");
 var txts = $("tabTxt").getElementsByClassName("demo");
 if(tits.length != txts.length) {return;}
 for(var i=0,l=tits.length; i<l; i++) {
 tits[i].id = i;
 tits[i].onmouseover = function() {
 clearInterval(timer);
 styleFun(this.id);
 }
 tits[i].onmouseout = function() {
 timer = setInterval(autoPlay, 2000);
 }
 }
 //在开启定时器的同时清楚定时器并置空
 if(timer) {
 clearInterval(timer);
 timer = null;
 }
 timer = setInterval(autoPlay, 2000);
 function autoPlay() {
 index++;
 if(index >= tits.length) {
 index = 0;
 }
 styleFun(index);
 }
 function styleFun(ele) {
 for(var j=0,m=tits.length; j<m; j++) {
 tits[j].className = "";
 txts[j].style.display = "none";
 }
 tits[ele].className = "select";
 txts[ele].style.display = "block";
 //将鼠标移入移出时的index传给autoPlay;
 index = ele;
 }
 }
 </script>
</body>
</html>

4. 广告栏切换实例

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 list-style: none;
 }
 .wrap {
 height: 170px;
 width: 490px;
 margin: 20px auto;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
 }
 .wrap ul {
 position: absolute;
 }
 .wrap ul li {
 height: 170px;
 }
 .wrap ol {
 position: absolute;
 right: 5px;
 bottom: 10px;
 }
 .wrap ol li {
 height: 20px;
 width: 20px;
 background: #ccc;
 border: solid 1px #666;
 margin-left: 5px;
 color: #000;
 float: left;
 line-height: center;
 text-align: center;
 cursor: pointer;
 }
 .wrap ol .on {
 background: #E97305;
 color: #fff;
 }
 </style>
 <script type="text/javascript">
 window.onload = function() {
 var wrap = document.getElementById('wrap'),
 pic = document.getElementById('pic'),
 piclist = pic.getElementsByTagName('li'),
 list = document.getElementById('list').getElementsByTagName('li'),
 picheight = 170,
 index = 0,
 timer = null;
 if(piclist.length != list.length) {
 return;
 }
 // 定义并调用自动播放函数
 if(timer) {
 clearInterval(timer);
 timer = null;
 }
 timer = setInterval(picFunc, 2000);
 function picFunc() {
 index++;
 if(index >= piclist.length) {
 index = 0;
 }
 changePic(index);
 }
 // 定义图片切换函数
 function changePic(ele) {
 for(var j = 0, m = piclist.length; j < m; j++) {
 list[j].className = "";
 }
 pic.style.top = -ele * picheight + "px";
 list[ele].className = "on";
 index = ele;
 }
 // 鼠标划过整个容器时停止自动播放
 wrap.onmouseover = function() {
 clearInterval(timer);
 }
 // 鼠标离开整个容器时继续播放至下一张
 wrap.onmouseout = function() {
 timer = setInterval(picFunc, 2000);
 }
 // 遍历所有数字导航实现划过切换至对应的图片
 for(var i = 0, l = list.length; i < l; i++) {
 list[i].id = i;
 list[i].onmouseover = function() {
 changePic(this.id);
 }
 }
 }
 </script>
 </head>
 <body>
 <div class="wrap" id='wrap'>
 <ul id="pic">
 <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
 <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
 <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
 <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
 <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
 </ul>
 <ol id="list">
 <li class="on">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ol>
 </div>
 </body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

几种tab切换详解

- Author -

一者乎

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（二）
May 11 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
Bootstrap页面缩小变形的快速解决办法
Feb 03 #Javascript
拖动时防止选中
Feb 03 #Javascript
jQuery表格的维护和删除操作
Feb 03 #Javascript
折叠菜单及选择器的运用
Feb 03 #Javascript
jQuery读取XML文件的方法示例
Feb 03 #Javascript
JavaScript函数基础详解
Feb 03 #Javascript
JavaScript提高加载和执行效率的方法
Feb 03 #Javascript
有序排列(1) 数据加密(1) shell脚本(1) 公共键(1) kafka(2) key(1) pycryto(1) 连接器(1) 曝光融合(1) 遍历文件夹(1)
You might like
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
简单易用的计数器（数据库）
2006/10/09 PHP
需要发散思维学习PHP
2009/06/29 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python list操作用法总结
2015/11/10 Python
Python中的函数作用域
2018/05/07 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
python 如何调用远程接口
2020/09/11 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
护理专业个人求职简历的自我评价
2013/10/13 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
体育部部长竞选稿
2015/11/21 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电