javascript实现tabs选项卡切换效果(自写原生js)


Posted in Javascript onMarch 19, 2013

现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出。
效果图如下:
javascript实现tabs选项卡切换效果(自写原生js) 
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 .on{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:;" class="on">首页</a> 
<a href="javascript:;">技术</a> 
<a href="javascript:;">生活</a> 
<a href="javascript:;">作品</a> 
</h2> 
<p class="tabs-content">首页首页首页首页首页首页首页首页首页首页</p> 
<p class="tabs-content hide">技术技术技术技术技术技术技术技术技术技术</p> 
<p class="tabs-content hide">生活生活生活生活生活生活生活生活生活生活</p> 
<p class="tabs-content hide">作品作品作品作品作品作品作品作品作品作品</p> 
</div> 
<br/><br/> 
<div class="tabs" id="tabs2"> 
<h2 class="tabs-nav clearfix"> 
<a href="javascript:;" class="on">11111</a> 
<a href="javascript:;">22222</a> 
<a href="javascript:;">33333</a> 
</h2> 
<p class="tabs-content">11111111111111111111111111111111111</p> 
<p class="tabs-content hide">222222222222222222222222222222222222</p> 
<p class="tabs-content hide">333333333333333333333333333333333333333</p> 
</div> 
</body> 
</html> 
<script type="text/javascript" src="tabs.js"></script> 
<script type="text/javascript"> 
window.onload = function(){ 
tabs('tabs','click'); 
tabs('tabs2','mouseover'); 
} 
</script>

其中 base.css 参考我的CSS框架——base.css。
javascript 代码
function tabs(id,trigger){ 
var tabsBtn = document.getElementById(id).getElementsByTagName('h2')[0].getElementsByTagName('a'); 
var tabsContent = document.getElementById(id).getElementsByTagName('p'); 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsBtn[i].index = i; 
if(trigger == 'click'){ 
tabsBtn[i].onclick = function(){ 
clearClass(); 
this.className = 'on'; 
showContent(this.index); 
} 
}else if(trigger == 'mouseover'){ 
tabsBtn[i].onmouseover = function(){ 
clearClass(); 
this.className = 'on'; 
showContent(this.index); 
} 
} 
} 
function showContent(n){ 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsContent[i].className = 'hide'; 
} 
tabsContent[n].className = 'tabs-content'; 
} 
function clearClass(){ 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsBtn[i].className = ''; 
} 
} 
}

注意
1、标题如首页、技术、生活和作品是在 h2 标签中。
2、显示当前标题使用 class 名为 on 的类,如果修改成其他 class 的如 selected,就需要修改 tabs.js 中相对应的内容。
3、标题所对应的内容是在 p 标签中。p 标签中不能再有 p 标签。
PS:这是本人闲着无聊,通过自己所学的 javascript 知识,随意写的一些效果。
Javascript 相关文章推荐
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
layui对工具条进行选择性的显示方法
Sep 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
Javascript中valueOf与toString区别浅析
Mar 19 #Javascript
You might like
一个典型的PHP分页实例代码分享
2011/07/28 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
php实现的RSS生成类实例
2015/04/23 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
python flask 多对多表查询功能
2017/06/25 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python中几种自动微分库解析
2019/08/29 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
二年级学生评语大全
2014/04/23 职场文书
酒店开业策划方案
2014/06/02 职场文书
股东授权委托书
2014/10/15 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang