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学习之闭包分析
Dec 02 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
php文件操作相关类实例
2015/06/18 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
webpack打包js的方法
2018/03/12 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python中max函数用法实例分析
2015/07/17 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python实现动态创建类的方法分析
2019/06/25 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
二年级学生评语大全
2014/04/23 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android