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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
PHP的变量类型和作用域详解
2014/03/12 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
javascript的内存管理详解
2013/08/07 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
如何在django中运行scrapy框架
2020/04/22 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
暑期研修感言
2014/02/17 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
起诉意见书范文
2015/05/19 职场文书
居安思危观后感
2015/06/11 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang