首页
所有分类
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中日期转换成时间戳的小例子
Mar 21 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
Vue响应式原理详解
Apr 18 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
vue组件生命周期详解
Nov 07 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
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) 代理(2) 增删查改(1) 脏读(2) IC-R9500(1) canvas(2) 外键(1) SQL注入(2)
You might like
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
jquery 常用操作方法
2010/01/28 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
如何制作幻灯片（代码分享）
2017/01/06 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
2019/11/01 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
PyCharm 创建指定版本的 Django（超详图解教程）
2019/06/18 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
美国在线购物频道：Shop LC
2019/04/21 全球购物
英国计算机商店：Technextday
2019/12/28 全球购物
电气专业推荐信范文
2013/11/18 职场文书
简单而又朴实的个人求职信分享
2013/12/12 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
论文评审意见
2015/06/05 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技