JS代码

(function (w) {
//tab对象
function Tab(config) {
//定义变量,防止变量污染
this.tabMenus=null;
this.tabMains=null;
if(config){
this._init(config);
}
}
//为原型添加属性,防止内存重复创建
Tab.prototype={
_init:function (config) {
//初始化元素
this.initElements(config);
this.initEvent();
if(config.auto){
this.autoPlay();
}
},
initElements:function (config) {
var tabMenu=document.getElementById(config.tabMenu);
var tabMain=document.getElementById(config.tabMain); this.tabMenus=tabMenu.children;
this.tabMains=tabMain.children;
},
initEvent:function () {
for(var i=;i<this.tabMenus.length;i++){
var li=this.tabMenus[i];
li.index=i;
//定义this变量存储,闭包环境可以调用此变量
var that=this;
li.onclick=function () {
that.change(this);
}
}
},
change:function (tabMenu) {
for(var i=;i<this.tabMenus.length;i++){
this.tabMenus[i].className="";
this.tabMains[i].className="main";
}
tabMenu.className="active";
this.tabMains[tabMenu.index].className+=" select";
},
autoPlay:function () {
var index=;
var that=this;
setInterval(function () {
index++;
if(index>=that.tabMenus.length){
index=;
}
that.change(that.tabMenus[index]);
},);
}
}
//将插件暴露给windows
w.Tab=Tab;
})(window)

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="tab.css">
</head>
<body>
<div class="wrapper">
<ul class="tab" id="menu">
<li class="active">国际大牌<span>◆</span></li>
<li>国妆名牌<span>◆</span></li>
<li>清洁用品<span>◆</span></li>
<li>男士精品</li>
</ul>
<div class="products" id="main">
<div class="main select"><a href="#"><img src="imgs/guojidapai.jpg"></a></div>
<div class="main"><a href="#"><img src="imgs/guozhuangmingpin.jpg"></a></div>
<div class="main"><a href="#"><img src="imgs/qingjieyongpin.jpg"></a></div>
<div class="main"><a href="#"><img src="imgs/nanshijingpin.jpg"></a></div>
</div>
</div>
</body>
<script type="text/javascript" src="tab.js"></script>
<script>
var tb=new Tab({
tabMenu:"menu",
tabMain:"main",
auto:true
});
</script>
</html>

css代码

 html,body,ul,li {
margin: ;
padding: ;
}
ul{
list-style: none;
}
.wrapper {
margin: auto;
width: 1000px;
height: 475px;
margin-top: 100px;
}
.wrapper .tab {
width: 320px;
height: 36px;
border: 1px solid #ddd;
border-bottom: ;
}
.wrapper .tab li{
float:left;
width: 80px;
height: 34px;
line-height: 34px;
cursor: pointer;
text-align: center;
border-top: 4px solid #fff;
position: relative;
}
.wrapper .tab .active{
border-top: 4px solid red;
}
.wrapper .tab span{
width: 1px;
height: 14px;
background-color: #ddd;
position: absolute;
right:0px;
top:10px;
overflow: hidden;
}
.wrapper .products{
width: 1002px;
height: 476px;
border:1px solid #ddd;
} .wrapper .products .main{
float: left;
display: none;
}
.wrapper .products .select{
display: block;
}

js插件编程-tab框的更多相关文章

  1. Bootstrap的js插件之警告框(alert.js)

    data-dismiss="alert"--为关闭button加入该属性能够使其自己主动为警告框赋予关闭功能. .fade .in--为警告框在关闭时加入动画效果. 很多其它细节參 ...

  2. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  3. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  4. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  5. Bootstrap入门(三十)JS插件7:警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

  6. Bootstrap入门(二十九)JS插件6:弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  7. Bootstrap入门(二十三)JS插件1:模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  8. Highchar.js插件提示框千分位显示为空格而不是逗号 --(2018 08/06-08/12周总结)

    1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...

  9. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

随机推荐

  1. select样式调整

    如果select样式如下图:是因为添加了 border-color:#adb7d6; border-width:1px; 样式 删除上面两个样式属性,效果如下图:

  2. 在Struts2的Action中取得请求参数值的几种方法

    先看GetRequestParameterAction类代码: public class GetRequestParameterAction extends ActionSupport { priva ...

  3. 在UIWebView中添加自定义编辑菜单

    如何在UIWebView中添加自定义的编辑菜单困扰了很久.没想到意外的简单! 现在很多的内容提供类应用中,长按内容页会选中按的单词并且显示一个编辑菜单.如图: 独乐乐不如众乐乐.一篇好文章是需要大家一 ...

  4. Graph cut使用方法

    下载:http://www.wisdom.weizmann.ac.il/~bagon/matlab.html 1. 运行compile_gc.m 2.运行gc_example.m(必须同目录吗?!) ...

  5. Win7下:编译器错误信息: CS0016

    解决办法: 原因是由于系统目录下的Temp目录无相应的权限所致,具体操作如下: 来到C:/Windows目录,修改temp文件夹的属性. 在安全页设置IIS-IUSRS的权限,赋予修改.读取.写入等权 ...

  6. 余额宝 vs. P2P网贷,谁更有生命力?

    余额宝跟P2P网贷作为一个理财方式,要说谁更有生命力,那就必须从以下几个方面说起,一是收益性,二是风险性,三是流动性,下面从这几个方面来对比一下余额宝跟P2P网贷. 首先是收益性,作为投资理财者,第一 ...

  7. 网页控件很多时最好用绝对定位absolute

    否则动一个位置可能影响其他的,牵一发而动全身

  8. C# Winform下一个热插拔的MIS/MRP/ERP框架11(启航)

    初学时,有了想法却完全不知道该从何下指,此序列将抛砖引玉,与大家共同学习进步. 一个程序的初始,必然是启动. 我的要求: 1.应用程序保持单例: 2.从配置文件加载一些基础数据进行初始化: 3.显示软 ...

  9. SignalR-001

    SignalR 是什么? ASP.NET Core SignalR 是一个开放源代码库,它简化了向应用添加实时 web 功能. 实时 web 功能立即使服务器端代码能够将内容推送到客户端. 一.有这么 ...

  10. 洛谷P4501/loj#2529 [ZJOI2018]胖(ST表+二分)

    题面 传送门(loj) 传送门(洛谷) 题解 我们对于每一个与宫殿相连的点,分别计算它会作为多少个点的最短路的起点 若该点为\(u\),对于某个点\(p\)来说,如果\(d=|p-u|\),且在\([ ...