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 22 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 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
正则表达式语法
2006/10/09 Javascript
php判断ip黑名单程序代码实例
2014/02/24 PHP
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Pytorch转tflite方式
2020/05/25 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
大学生入党推荐书范文
2014/05/17 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
Python自动化实战之接口请求的实现
2022/05/30 Python