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 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 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 ajax 分页类代码
2008/11/13 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python求解水仙花数的方法
2015/05/11 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Python 一句话生成字母表的方法
2019/01/02 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
干部现实表现材料
2014/02/13 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
乱世佳人观后感
2015/06/08 职场文书
英文投诉信格式
2015/07/03 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
pytorch 中nn.Dropout的使用说明
2021/05/20 Python