javascript实现tabs选项卡切换效果(扩展版)


Posted in Javascript onMarch 19, 2013

前段时间写了个tabs 选项卡切换效果,今天抽空在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果了。
html 代码:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>js-tabs</title> 
<link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/> 
<style type="text/css"> 
a{color:#a0b3d6;} 
.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;} 
.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;} 
.tabs-nav .select1,.tabs-nav .select2,.tabs-nav .select3,.tabs-nav .select4{background:white;border-bottom:1px solid white;_position:relative;} 
.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;} 
</style> 
</head> 
<body> 
<div class="tabs" id="tabs"> 
<h2 class="tabs-nav clearfix"> 
<a href="javascript:;">首页</a> 
<a href="javascript:;">技术</a> 
<a href="javascript:;">生活</a> 
<a href="javascript:;">作品</a> 
</h2> 
<p class="tabs-content">首页首页首页首页首页首页首页首页首页首页</p> 
<p class="tabs-content">技术技术技术技术技术技术技术技术技术技术</p> 
<p class="tabs-content">生活生活生活生活生活生活生活生活生活生活</p> 
<p class="tabs-content">作品作品作品作品作品作品作品作品作品作品</p> 
</div> 
<br/><br/> 
<div class="tabs" id="tabs2"> 
<h2 class="tabs-nav clearfix"> 
<a href="javascript:;">11111</a> 
<a href="javascript:;">22222</a> 
<a href="javascript:;">33333</a> 
</h2> 
<p class="tabs-content">11111111111111111111111111111111111</p> 
<p class="tabs-content ">222222222222222222222222222222222222</p> 
<p class="tabs-content ">333333333333333333333333333333333333333</p> 
</div> 
</body> 
</html> 
<script type="text/javascript" src="tabs.js"></script> 
<script type="text/javascript"> 
window.onload = function(){ 
tabs('tabs','click',true,1000); 
tabs('tabs2','mouseover'); 
} 
</script>

tabs.js 代码:
function tabs(id,trigger,autoplay,time){ 
var tabsWrap = document.getElementById(id); 
var tabsBtn = tabsWrap.getElementsByTagName('h2')[0].getElementsByTagName('a'); 
var tabsContent = getClass('tabs-content',tabsWrap); 
var timer = null; 
var current = 0; 
show(0); 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsBtn[i].index = i; 
if(trigger == 'click'){ 
tabsBtn[i].onclick = function(){ 
show(this.index); 
} 
}else if(trigger == 'mouseover'){ 
tabsBtn[i].onmouseover = function(){ 
show(this.index); 
} 
} 
} 
if(autoplay){ 
autoPlay(); 
tabsWrap.onmouseover = function(){ 
clearInterval(timer); 
} 
tabsWrap.onmouseout = function(){ 
autoPlay(); 
} 
} 
function autoPlay(){ 
timer = setInterval(function(){ 
show(current); 
current++; 
if(current >= tabsBtn.length){ 
current = 0; 
} 
},time); 
} 
function show(n){ 
current = n; 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsBtn[i].className = ''; 
tabsContent[i].style.display = 'none'; 
} 
tabsBtn[current].className = 'select' + (current + 1); 
tabsContent[current].style.display = 'block'; 
} 
function getClass(classname,obj){ 
var results = []; 
var elems = obj.getElementsByTagName('*'); 
for(var i = 0; i < elems.length; i++){ 
if(elems[i].className.indexOf(classname) != -1){ 
results[results.length] = elems[i]; 
} 
} 
return results; 
} 
}

PS:这是本人闲着无聊,通过自己所学的 javascript 知识,随意写的一些效果。
Javascript 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 #Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 #Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 #Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 #Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 #Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 #Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 #Javascript
You might like
PHP与SQL注入攻击[一]
2007/04/17 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php中session定期自动清理的方法
2015/11/12 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
js中判断控件是否存在
2010/08/25 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
Angular5.1新功能分享
2017/12/21 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Python新手学习函数默认参数设置
2020/06/03 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
《草原的早晨》教学反思
2014/04/08 职场文书
国庆节演讲稿
2014/05/27 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
主持人开幕词
2015/01/29 职场文书
法律意见书范本
2015/06/04 职场文书
汽车销售员工作总结
2015/08/12 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA