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/ ...
随机推荐
- 清北学堂模拟赛d1t2 火柴棒 (stick)
题目描述众所周知的是,火柴棒可以拼成各种各样的数字.具体可以看下图: 通过2根火柴棒可以拼出数字“1”,通过5根火柴棒可以拼出数字“2”,以此类推. 现在LYK拥有k根火柴棒,它想将这k根火柴棒恰好用 ...
- Error:java: Internal compiler error: java.lang.Exception: java.lang.NoClassDefFoundError解决
场景:将Eclipse的可以运行的项目转到IDEA发现一个奇怪的错误 今天用IDEA2018.1运行SpringBoot项目报错如下: Error:java: Internal compiler er ...
- MySQL基于域名做高可用切换（Consul初试）
一,Consul功能介绍 服务发现 - Consul的客户端可用提供一个服务,比如 api 或者mysql ,另外一些客户端可用使用Consul去发现一个指定服务的提供者.通过DNS或者HTTP应用程 ...
- keil编译后生成的M51文件解析
通过*.m51文件我们能够清楚的看到单片机存储器的使用情况,以及能够看到每一个变量包含局部变量的位置. 之前碰到一个问题,相同的程序,在small模式下编译后执行没问题,但在large模式下能够编译. ...
- event loop js事件循环 microtask macrotask
转: 原文 http://blog.csdn.net/sjn0503/article/details/76087631 ---------------------------------------- ...
- 自己定义ViewpagerIndicator （仿猫眼，加入边缘回弹滚动效果）
一.概述 今天主要来分享个自己定义viewpagerindicator.效果主要是仿 猫眼电影 顶部的栏目切换.也就是我们常说的indicator,难度简单,为了让滑动时效果更炫酷,我在滑动到左边第一 ...
- Python3基础（六） 深入list列表
正如Python FAQ1附录中说的, Python中任何值都是一个对象,所以任何类型(int.str.list-)都是一个类.而类就必然有它的方法或属性,我们要记下这么多类的所有方法显然是不可能的, ...
- scikit-learn：matplotlib.pyplot经常使用绘图功能总结（1）
參考:http://matplotlib.org/api/pyplot_api.html 绘图功能总结(2):http://blog.csdn.net/mmc2015/article/details/ ...
- 谈谈c++纯虚函数的意义！
纯虚函数的存在有什么意义呢?相信大学假设有c++这么课程.在讲到纯虚函数时,必然会讲到纯虚函数是面向接口编程的基础. 如今和大家分享下纯虚函数设计的原由.目的.产生的效果. 现代软件project很庞 ...
- 防遗忘笔记，Fedora交叉编译window下的virt-iewer的汉化
1. 汉化代码里的资源 virtviewer使用的是gettex的方案是标准的linux里国际化的方案.按道理仅仅须要改动virtualviewer/po/zh_CN.po的文件. 编译. 然后确认在 ...