首页
所有分类
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脚本实现Web页面信息交互
Oct 11 Javascript
遨游，飞飞，IE，空中网 浏览器无提示关闭方法
Jul 11 Javascript
40款非常棒的jQuery 插件和制作教程（系列一）
Oct 26 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
node.js中的require使用详解
Dec 15 Javascript
深入探寻javascript定时器
Jan 02 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
Html5生成验证码的示例代码
May 10 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
中波(3) SW(1) LW(1) ad hoc(1) 调频(4) 电磁辐射(1) FM(4) SWL(1) 调幅(1) GWEN(1)
You might like
初级的用php写的采集程序
2007/03/16 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
Javascript window对象详解
2014/11/12 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
python创建进程fork用法
2015/06/04 Python
python如何实现一个刷网页小程序
2018/11/27 Python
python中 * 的用法详解
2019/07/10 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
python3实现raspberry pi（树莓派）4驱小车控制程序
2020/02/12 Python
Python sorted对list和dict排序
2020/06/09 Python
如何利用python发送邮件
2020/09/26 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
Perfume’s Club德国官网：在线购买香水
2019/04/08 全球购物
DC Shoes荷兰官方网站：美国极限运动品牌
2019/10/22 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL