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静态的url如何传递
May 03 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
bootstrap table小案例
Oct 21 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
浅谈vue首屏加载优化
Jun 28 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
Vue 数据响应式相关总结
Jan 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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
xtree.js 代码
2007/03/13 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python控制台中实现进度条功能
2015/11/10 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
城管综合整治方案
2014/05/01 职场文书
医院保洁员管理制度
2015/08/05 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
python lambda 表达式形式分析
2022/04/03 Python