JS高级——面向对象方式解决tab栏切换问题
注意事项
1、给li元素注册事件，函数里面的this指的li元素，那么我们可以在注册事件之前将Tab对象用that=this进行保存
2、使用沙箱模式，所以暴露给外面的变量使用的是window.tab，将window作为参数传递进去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} .clearfix:after {
content: '';
visibility: hidden;
display: block;
clear: both;
} .container {
width: 800px;
margin: 120px auto;
} .tab {
line-height: 40px;
} .tab ul {
width: 500px;
list-style: none;
border-top: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid gray;
} .tab ul li {
float: left;
width: 100px;
height: 40px;
text-align: center;
position: relative;
} .tab ul li:after {
content: '';
display: block;
width: 1px;
height: 14px;
border-right: 1px solid gray;
position: absolute;
top: 13px;
right: 0;
} .tab ul li:nth-child(5):after {
visibility: hidden;
} .tab ul li.current {
color: red;
} .tab ul li.other {
color: black;
} .main {
height: 500px;
border: 1px solid gray;
} .main div {
height: 500px;
text-align: center;
line-height: 500px;
font-size: 60px;
display: none;
} .main div.current {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="tab">
<ul class="clearfix" id="tab-menu">
<li class="current">童装</li>
<li>男装</li>
<li>女装</li>
<li>冬天</li>
<li>夏天</li>
</ul>
</div>
<div class="main" id="tab-main">
<div class="current">童装</div>
<div>男装</div>
<div>女装</div>
<div>冬天</div>
<div>夏天</div>
</div>
</div>
<script>
(function (w) { function Tab(config) {
this.tabMenus = null;
this.tabMains = null;
if (config) {
this._init(config)
}
} Tab.prototype = {
constructor: Tab,
//初始化工作
_init: function (config) {
this.initElements(config);
this.initEvent();
if (config.auto) {
this.autoPlay();
}
},
initEvent: function () {
for (var i = 0; i < this.tabMenus.length; i++) {
var li = this.tabMenus[i];
li.index = i;
//that存储当前对象也就Tab创建出来的对象
var that = this;
li.onclick = function () {
//that还是只想Tab创建出来的对象
//this指的就是当前点击事件触发的这个li
that.change(this);
};
}
},
initElements: function (config) {
//根据config里的id
//给当前对象的tabMenus和tabMains赋值
var tabMenu = document.getElementById(config.tabMenu);
var tabMain = document.getElementById(config.tabMain); this.tabMenus = tabMenu.children;
this.tabMains = tabMain.children;
},
change: function (tabMenu) {
//1.让所有的li变暗
for (var i = 0; i < this.tabMenus.length; i++) {
this.tabMenus[i].className = "other";
//3.让所有div隐藏
this.tabMains[i].style.display = "none";
}
//2.让当前的li变亮
tabMenu.className = 'current';
//4.对应的div显示
this.tabMains[tabMenu.index].style.display = "block";
},
autoPlay: function () {
var index = 0;
var that = this;
setInterval(function () {
index++;
if (index == that.tabMenus.length) {
index = 0;
}
that.change(that.tabMenus[index]);
}, 2000);
}
}
w.Tab = Tab;
})(window);
var tb = new Tab({
tabMenu: "tab-menu", // 指定tab栏菜单id
tabMain: "tab-main", // 指定tab栏内容id
auto: true // 是否自动播放
});
</script>
</body>
</html>
JS高级——面向对象方式解决tab栏切换问题的更多相关文章
- JS高级——面向对象方式解决歌曲管理问题
需要注意的问题: 1.其他模块若是使用构造函数MP3创建对象,唯一不同的就是他们传入的音乐库是不一样的,所以构造函数中存在一个songList属性,其他一样的就被添加到了构造函数的原型对象之中 2.原 ...
- 如何解决tab栏切换只发一次请求的问题
用的antd的tab栏组件,发现切换tab栏只在componentDidMount里面发了一次请求,后来发现是缓存问题,于是用activeKey再次进行了判断,代码如下:
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- tab栏切换制作
tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- tab栏切换效果案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 理解 LARGE_INTEGER的定义
http://bbs.csdn.net/topics/310239341 #if defined(MIDL_PASS) typedef struct _LARGE_INTEGER { #else // ...
- M - Help Jimmy DP
"Help Jimmy" 是在下图所示的场景上完成的游戏. 场景中包括多个长度和高度各不相同的平台.地面是最低的平台,高度为零,长度无限. Jimmy老鼠在时刻0从高于所有平台的某 ...
- idea常用快捷键汇总
自动导入或补全 Ctrl+空格,代码提示自动提示待输入项 Ctrl+Shift+空格,自动补全代码语句 Ctrl+Alt+空格,类名自动完成 Ctrl+Shift + Enter,语句完成(完成当前语 ...
- [转] python 获取本机ip地址的两种实现方法
#!/usr/bin/python import socket import fcntl import struct def get_ip_address(ifname): s = socket.so ...
- MyBatis3错误：Parameter 'id' not found. Available parameters are [arg2, arg1, arg0, param3, param1, param2]或者Parameter '0' not found. Available parameters are [arg2, arg1, arg0, param3, param1, param2]
这个问题涉及到MyBatis3在使用select节点查询时传递多个参数的问题.问题分析如下: 1.如果是单个查询一般是这样配置: <select id="getUserArticles ...
- Diagnose High-Latency I/O Operations Using SystemTap
Luca Canali on 28 Jul 2015 Topic: this post is about some simple tools and techniques that can be us ...
- RAR5格式不同词典大小下压缩率的简单测试
一个VMWare虚拟机安装Win7后的磁盘文件进行压缩,已经进行了清理处理,原始大小为12.1GB 词典大小 压缩后大小 压缩比率 32MB 4.08GB 33.7% 256MB 3.88GB 3 ...
- 1.7－BGP②
BGP的更新源(BGP Neighbor Update Source Address): 原则1: 在默认情况下, BGP路由器以自己路由表中,到达对方BGP邻居的地址的那条路由所指示的出接口(物理接 ...
- 【Linux命令】--（1）文件文件夹操作命令15条
文件文件夹操作命令++++++++++++++++++++++++++++++++++++++++ 列出进入显示文件夹 ls cd pwd 创建移动删除文件 mkdir rm rmd ...
- YTU 2776: 小壮的习惯
2776: 小壮的习惯 时间限制: 1 Sec 内存限制: 128 MB 提交: 206 解决: 40 题目描述 小壮是一个英语初学者,一天,逗比的小壮看英语书,被其中的句子吸引了.他有个习惯,他 ...