JavaScript 封装一个tab效果源码分享


Posted in Javascript onSeptember 15, 2015

效果图如下:

JavaScript 封装一个tab效果源码分享

查看演示  源码下载

html代码

<!DOCTYPE html>
<html>
<head>
<title>tab测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-" />
<link href="css/tab.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/tab-min.js"></script>
</head>
<body>
<div id="tab">
 <!-- tabHead -->
 <ul class="tab-nav">
 <li><a href="javascript:void()">交易安全</a></li>
 <li><a href="javascript:void()">淘宝大学</a></li>
 <li><a href="javascript:void()">爱心</a></li>
 </ul>
 <!-- tabPanel-->
 <ul class="tab-bd">
 <li></li>
 <li></li>
 <li></li>
 </ul>
</div>
<script type="text/javascript">
tabPanel({"panel":"tab"});//panel为必填项,default、defalutStyle、hoverStyle为选填项
</script>
</body>
</html>

js代码

function tabPanel(param){
 var defaultIndex=param["default"]||,//设置显示的页面
 panelobj=param["panel"],//设置tab容器
 defalutClass=param["defalutStyle"]||"",//设置tab菜单项的普通样式
 hoverClass=param["hoverStyle"]||"hover",//设置鼠标移到tab菜单项的样式
 currentIndex=defaultIndex,
 menus=_$(panelobj).getElementsByTagName("ul")[].getElementsByTagName("li"),
 contents=_$(panelobj).getElementsByTagName("ul")[].getElementsByTagName("li"),
 menuNumber=menus.length,
 hidden="hidden";
 for(var i=;i<menuNumber;i++){
 _setClass(contents[],hoverClass);
 _setClass(contents[i],hidden);
 _setClass(menus[i],defalutClass);
 (function(i){
 menus[i].onmouseover=function(){
 var old=menus[currentIndex];
 _setClass(old,defalutClass);
 _setClass(contents[currentIndex],hidden);
 var cur=menus[i];
 _setClass(cur,hoverClass);
 currentIndex=i;
 _setClass(contents[i],"");
 };
 })(i);
 }
 _setClass(menus[currentIndex],hoverClass);
 _setClass(contents[currentIndex],"");
 //便利函数
 function _setClass(obj,className){obj.className=className}
 function _$(oid){return typeof(oid) == "string"?document.getElementById(oid):oid}
}

css代码

#tab{border:px solid #ccc;}
#tab .tab-bd{border-top:none;margin: auto;padding:px;text-align:left;height:px;position:relative}
.tab-nav{margin: auto;padding:;background:#eee;height:px;}
.tab-nav li{display:inline;list-style:none outside none;width:px;height:px;float:left;line-height:px;text-align:center;}
.tab-nav li a{color:#;display:inline-block}
.tab-nav li a:hover,.tab-nav li.hover a{text-decoration:none;background:#fff;color:#;display:block; }
.hidden{display:none}
Javascript 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 #Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 #Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 #Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 #Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 #Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 #Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 #Javascript
You might like
一个简单php扩展介绍与开发教程
2010/08/19 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
php测试kafka项目示例
2020/02/06 PHP
js控制表单操作的常用代码小结
2013/08/15 Javascript
JS跨域问题详解
2014/11/25 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
python3 xpath和requests应用详解
2020/03/06 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
python Matplotlib模块的使用
2020/09/16 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
小学生家长评语集锦
2014/01/30 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
早会主持词
2014/03/17 职场文书
财务内勤岗位职责
2014/04/17 职场文书
党员干部一句话承诺
2014/05/30 职场文书
大学生助学金感谢信
2015/01/21 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
Python中的程序流程控制语句
2022/02/24 Python
详解pytorch创建tensor函数
2022/03/22 Python