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实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
jquery实现倒计时功能
Dec 28 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
jquery 手势密码插件
Mar 17 Javascript
node.js实现登录注册页面
Apr 08 Javascript
js中this对象用法分析
Jan 05 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
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
关于js与php互相传值的介绍
2013/06/25 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
AngularJS快速入门
2015/04/02 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python定义一个Actor任务
2020/07/29 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
某公司的.net工程师面试题笔试题
2013/11/22 面试题
小学后勤管理制度
2014/01/14 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
英文慰问信范文
2015/03/24 职场文书
永不妥协观后感
2015/06/10 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby