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 相关文章推荐
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
js清理Word格式示例代码
Feb 13 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
vue增加强缓存和版本号的实现方法
May 01 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,不用COM,生成excel文件
2006/10/09 PHP
基于文本的搜索
2006/10/09 PHP
生成卡号php代码
2008/04/09 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
原始的js代码和jquery对比体会
2013/09/10 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
销售业务实习自我鉴定
2013/09/23 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
应急处置方案
2014/06/16 职场文书
医院见习报告范文
2014/11/03 职场文书
电力工程合作意向书
2015/05/11 职场文书
小学班级标语口号大全
2015/12/26 职场文书
个人业务学习心得体会
2016/01/25 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Python图像处理库PIL详细使用说明
2022/04/06 Python