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}
赞 (0)

相关推荐

  • JS封装的选项卡TAB切换效果示例

    JS封装的选项卡TAB切换效果示例

    本文实例讲述了JS封装的选项卡TAB切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;}

  • js封装tab标签页实例分享

    话不多说,请看代码 <html> <head> <title></title> <meta charset="UTF-8"> <style> *{ padding:0; margin:0;} .block{ display:block;} .none{ display:none;} #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50

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

    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="styles

  • Vue实现简易翻页效果源码分享

    Vue实现简易翻页效果源码分享

    源码如下: <html> <head> <meta charset="UTF-8"> <title>slidePage</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style type="text/css"> *{ margin

  • JavaScript头像上传插件源码分享

    JavaScript头像上传插件源码分享

    本文实例为大家分享了JavaScript头像上传插件源码,供大家参考,具体内容如下 效果图: 源码: cxc.js /* cxc.js 频繁操作公共接口 */ var $ = function (id) { return document.getElementById(id); }; //通过id获取dom对象 var A = function (msg) { alert(msg); }; //alert的简写 var EmptyFun = function () { }; // 空方法 var

  • JavaScript实现的石头剪刀布游戏源码分享

    JavaScript实现的石头剪刀布游戏源码分享

    这个游戏主要设计到两点: 首先是胜负运算 由于石头剪刀布是循环性的 石头 杀 剪子 剪子 杀 布 布   杀  石头 石头  杀  剪子 ... 根据以上特点找出规律,写出算法即可. 让电脑随机 这点比较容易,前面我有写过文章介绍,不明白的童鞋可以去看看. 随机刷屏 其实这个效果不是游戏的关键性,但为了看起来更加互动,好玩,我就给加上了.这里用到了一个取模算法,根据余数去循环显示即可达到效果. 界面截图 最后上代码 <!DOCTYPE html> <html> <head&g

  • jQuery复制表单元素附源码分享效果演示

    jQuery复制表单元素附源码分享效果演示

    我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示 下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr

  • WPF实现类似360安全卫士界面的程序源码分享

    WPF实现类似360安全卫士界面的程序源码分享

    下面通过图文并茂的方式给大家介绍WPF实现类似360安全卫士界面的程序源码分享,点击此处下载源码哦. 以前学习Windows Form编程的时候,总感觉自己做的界面很丑,看到360安全卫士.迅雷等软件的UI设计都非常美观,心里总是憧憬着要是自己能实现这样的UI效果该多好!!!另一个困扰我的问题是,这个UI皮肤是如何用技术实现的呢?!虽然好多年过去了,但心里的憧憬和疑惑一直没有消失,而且越来越强烈.在日常的工作和学习中,自己在网上也经常留意类似的技术或者文章.最近在学习WPF的过程中,看到网上也有

  • JS原生2048小游戏源码分享(全网最新)

    JS原生2048小游戏源码分享(全网最新)

    最近在学习算法方面的知识,看到了一个由算法主导的小游戏,这里给大家分享下代码: 效果: 代码: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=360px,user-scalable=no" /> <title>2048小游戏</title> <style> body,h1,div,tabl

  • Spring Boot 员工管理系统超详细教程(源码分享)

    Spring Boot 员工管理系统超详细教程(源码分享)

    员工管理系统 1.准备工作 资料下载 内含源码 + 笔记 + web素材 源码下载地址: http://xiazai.jb51.net/202105/yuanma/javaguanli_jb51.rar 笔记 素材 源码 1.1.导入资源 将文件夹中的静态资源导入idea中 位置如下 1.2.编写pojo层 员工表 //员工表 @Data @NoArgsConstructor public class Employee { private Integer id; private String l

  • 由浅入深讲解Javascript继承机制与simple-inheritance源码分析

    老生常谈的问题,大部分人也不一定可以系统的理解.Javascript语言对继承实现的并不好,需要工程师自己去实现一套完整的继承机制.下面我们由浅入深的系统掌握使用javascript继承的技巧. 1. 直接使用原型链 这是最简粗暴的一种方式,基本没法用于具体的项目中.一个简单的demo如下: function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return th

  • 基于jquery步骤进度条源码分享

    基于jquery步骤进度条源码分享

    基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效.效果图如下: 在线预览       源码下载 html代码: <div class="step_context test"></div> 当前步骤: 第<input type="text" value="5" id="currentStepVal" />步 <button onclick="

随机推荐