首页
所有分类
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自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
每天一篇javascript学习小结（基础知识）
Nov 10 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
javascript实现小型区块链功能
Apr 03 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
德生PL330(2) ICF-SW7600GR(1) 山进(2) D1835(1) 德劲1103(3) L4X25T(1) PHILIPS(3) 飞利浦(2) 德生9700DX(1) D1875(1)
You might like
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python对数据库操作
2016/03/28 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Python 从相对路径下import的方法
2018/12/04 Python
python解析含有重复key的json方法
2019/01/22 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
python获取linux系统信息的三种方法
2020/10/14 Python
英国安全产品购物网站：The Safe Shop
2017/03/20 全球购物
西班牙土拨鼠床垫公司，感觉在云端：Marmota
2019/03/18 全球购物
数据库的约束含义
2012/09/09 面试题
采购部部门职责
2013/12/15 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
统计系教授推荐信
2014/02/28 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
书香校园建设方案
2014/05/02 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
超市督导岗位职责
2015/04/10 职场文书
学校远程教育工作总结
2015/08/11 职场文书
python中使用redis用法详解
2022/12/24 Redis