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 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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
2款PHP无限级分类实例代码
2015/11/11 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python解决八皇后问题示例
2018/04/22 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python基础教程之while循环
2019/08/14 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
优秀教师事迹材料
2014/12/15 职场文书
驻村工作简报
2015/07/20 职场文书
诚实守信主题班会
2015/08/13 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
mysql知识点整理
2021/04/05 MySQL
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
CSS极坐标的实例代码
2021/06/03 HTML / CSS
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers