首页
所有分类
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 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
javascript基本类型详解
Nov 28 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
layui实现文件或图片上传记录
Aug 28 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
使用Vue实现一个树组件的示例
Nov 06 Javascript
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) 继承(1) transaction(1) 封装(1) 构造函数(1) gRPC(3) PyAutoGUI(1) promise(2) variables(1)
You might like
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
JavaScript高级程序设计（第3版）学习笔记8 js函数（中）
2012/10/11 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
Python快速排序算法实例分析
2017/11/29 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python多线程thread及模块使用实例
2020/04/28 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
python绘制高斯曲线
2021/02/19 Python
英国的屈臣氏：Boots博姿
2017/12/23 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
商场消防演习方案
2014/02/12 职场文书
绿色城市实施方案
2014/03/19 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
Python加密技术之RSA加密解密的实现
2022/04/08 Python