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编程起步(第二课)
Jan 10 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
详解php实现页面静态化原理
2017/06/21 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
质量工程师岗位职责
2013/11/16 职场文书
经销商培训邀请函
2014/01/21 职场文书
优秀党员获奖感言
2014/02/18 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
保险经纪人求职信
2014/03/11 职场文书
民生工程实施方案
2014/03/22 职场文书
派出所所长先进事迹
2014/05/19 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫