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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
几种响应式文字详解
May 19 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 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 session 检测和注销
2009/03/16 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
人事部岗位职责范本
2014/03/05 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
家长给学校的建议书
2014/05/15 职场文书
2015年统战工作总结
2015/05/19 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技