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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
JS匿名函数实例分析
Nov 26 Javascript
JS中的作用域链
Mar 01 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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
实现树状结构的两种方法
2006/10/09 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
通过C++学习Python
2015/01/20 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
python更改已存在excel文件的方法
2018/05/03 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
keras K.function获取某层的输出操作
2020/06/29 Python
python的launcher用法知识点总结
2020/08/07 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
超市商业计划书
2014/05/04 职场文书
安全横幅标语
2014/06/09 职场文书
皇城相府导游词
2015/02/06 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
Python中如何处理常见报错
2022/01/18 Python
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers