JS面向对象编程实现的Tab选项卡案例详解
本文实例讲述了JS面向对象编程实现的Tab选项卡。分享给大家供大家参考，具体如下：
Tab选项卡案例
下面是一个简单面向过程的Tab选项卡。
<!DOCTYPE html>
<html>
<head>
<style>
#tabBox input {
background: #F6F3F3;
border: 1px solid #FF0000;
}
#tabBox .active {
background: #E9D4D4;
}
#tabBox div {
width:300px;
height:250px;
display:none;
padding: 10px;
background: #E9D4D4;
border: 1px solid #FF0000;
}
</style>
<meta charset="utf-8" />
<title>选项卡</title>
<script>
window.onload=function(){
var tabBox = document.getElementById('tabBox');
var tabBtn = tabBox.getElementsByTagName('input');
var tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i<tabBtn.length;i++){
tabBtn[i].index = i;
tabBtn[i].onclick = function (){
for(var j=0;j<tabBtn.length;j++){
tabBtn[j].className='';
tabDiv[j].style.display='none';
}
this.className='active';
tabDiv[this.index].style.display='block';
};
}
};
</script>
</head>
<body>
<div id="tabBox">
<input type="button" value="主页" class="active" />
<input type="button" value="说说" />
<input type="button" value="日志" />
<div style="display:block;">这是主页内容</div>
<div>这是说说内容</div>
<div>这是日志内容</div>
</div>
</body>
</html>
下面来慢慢改成面向对象的形式。
1.首先将嵌套的函数拿到window.onload外面，不能有函数嵌套，可以有全局变量。如下：所有的改写最终效果都不变。
<script>
//将在嵌套函数里的变量提取到全局中
var tabBtn = null;
var tabDiv = null;
window.onload = function(){
var tabBox = document.getElementById('tabBox');
tabBtn = tabBox.getElementsByTagName('input');
tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i<tabBtn.length;i++){
tabBtn[i].index = i;
//此处调用函数即可
tabBtn[i].onclick = clickBtn;
}
};
//将嵌套函数提取到全局中
function clickBtn(){
for(var j=0;j<tabBtn.length;j++){
tabBtn[j].className='';
tabDiv[j].style.display='none';
}
this.className='active';
tabDiv[this.index].style.display='block';
};
</script>
2.将全局的变量变为对象的属性，全局的函数变为对象的方法；将window.onload里的代码提取到一个构造函数里面，在window.onload里创建对象即可；(下面的代码执行起来是有问题的)。
这里必须注意：在构造函数Tab里的this跟之前this所代表的是不同的(此处是通过new来创建对象的)；在上面的示例中，this指的是调用者；在构造函数里，this指向的是var tab = new Tab() ，即tab这个对象，注意是对象。
说一下这段代码的问题：我们在Tab的原型上添加clickBtn方法后，clickBtn方法里的this本应该是指向var tab = new Tab()的，但是我们在 this.tabBtn[i].onclick = this.clickBtn; 将clickBtn添加给了this.tabBtn[i]，即input按钮，clickBtn的所属由Tab对象变成了input按钮。
clickBtn的所属变成input按钮后，那么clickBtn里的this指向按钮，那再来看clickBtn里的代码，this.tabBtn、this.tabDiv，input按钮里有这两个属性吗？没有，所以会出错！
<script>
window.onload = function(){
var tab = new Tab("tabBox");
}
/**
* 将之前window.onload里的代码提到一个构造函数里
* [可以将这个Tab构造函数想象成一个Tab类]
* @param {Object} id：选项卡id以参数的形式传入
*/
function Tab(id){
var tabBox = document.getElementById(id);
//将之前的全局变量变为对象的属性
this.tabBtn = tabBox.getElementsByTagName('input');
this.tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i<this.tabBtn.length;i++){
this.tabBtn[i].index = i;
//此处这种方式调用函数，已经将clickBtn的所属变成this.tabBtn[i]
this.tabBtn[i].onclick = this.clickBtn;
}
};
//将之前的全局函数添加到构造函数的原型里，作为对象的一个方法
Tab.prototype.clickBtn = function(){
alert(this); //HTMLInputElement
for(var j=0;j<this.tabBtn.length;j++){
this.tabBtn[j].className='';
this.tabDiv[j].style.display='none';
}
this.className='active';
this.tabDiv[this.index].style.display='block';
};
</script>
3.将clickBtn的调用放在一个函数里，这样就不会改变clickBtn的所属了。alert(this);此时弹出的是一个Object，说明clickBtn的所属关系没变，还是Tab对象。但是还有另一个问题，此时clickBtn里的this指向tab对象，那么this.className、this.index，此处的this指的是tab对象，那么对象中有这两个属性吗？没有，还会出错！所以第4步继续改造。
window.onload = function(){
var tab = new Tab("tabBox");
}
/**
* 选项卡
* @param {Object} id：选项卡id
*/
function Tab(id){
var tabBox = document.getElementById(id);
this.tabBtn = tabBox.getElementsByTagName('input');
this.tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i<this.tabBtn.length;i++){
this.tabBtn[i].index = i;
//将this保存成一个变量，就可以在下面代码中调用对象的方法了
var _this = this;
//此处这种方式调用函数，就不会改变clickBtn方法的所属关系
this.tabBtn[i].onclick = function(){
//注意此处不能直接使用this，this指向this.tabBtn[i]
_this.clickBtn();
};
}
};
//点击选项卡按钮
Tab.prototype.clickBtn = function(){
alert(this); //Object
for(var j=0;j<this.tabBtn.length;j++){
this.tabBtn[j].className='';
this.tabDiv[j].style.display='none';
}
this.className='active';
this.tabDiv[this.index].style.display='block';
};
4. 以参数的形式将点击的按钮传入clickBtn中
window.onload = function(){
var tab = new Tab("tabBox");
}
/**
* 选项卡
* @param {Object} id：选项卡id
*/
function Tab(id){
var tabBox = document.getElementById(id);
this.tabBtn = tabBox.getElementsByTagName('input');
this.tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i<this.tabBtn.length;i++){
this.tabBtn[i].index = i;
var _this = this;
this.tabBtn[i].onclick = function(){
//注意参数this代表的是this.tabBtn[i]，即input按钮
_this.clickBtn(this);
};
}
};
//将点击的按钮以参数的形式传入
Tab.prototype.clickBtn = function(btn){
for(var j=0;j<this.tabBtn.length;j++){
this.tabBtn[j].className='';
this.tabDiv[j].style.display='none';
}
btn.className='active';
this.tabDiv[btn.index].style.display='block';
};
5.最终版 —— 将代码提取到一个单独的js文件中，在用的时候引入即可。一般花大时间去写一个面向对象的程序，就是为了能够复用，以及方便的使用。
Tab.js
/**
* 选项卡
* @param {Object} id 选项卡id
*/
function Tab(id){
var tabBox = document.getElementById(id);
this.tabBtn = tabBox.getElementsByTagName('input');
this.tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i<this.tabBtn.length;i++){
this.tabBtn[i].index = i;
var _this = this;
this.tabBtn[i].onclick = function(){
_this.clickBtn(this);
};
}
};
/**
* 为Tab原型添加点击选项卡方法
* @param {Object} btn 点击的按钮
*/
Tab.prototype.clickBtn = function(btn){
for(var j=0;j<this.tabBtn.length;j++){
this.tabBtn[j].className='';
this.tabDiv[j].style.display='none';
}
btn.className='active';
this.tabDiv[btn.index].style.display='block';
};
使用：tab.html 可以看到使用的时候，就可以很简单的创建两个选项卡出来了。
<!DOCTYPE html>
<html>
<head>
<style>
.tab input {
background: #F6F3F3;
border: 1px solid #FF0000;
}
.tab .active {
background: #E9D4D4;
}
.tab div {
width:300px;
height:250px;
display:none;
padding: 10px;
background: #E9D4D4;
border: 1px solid #FF0000;
}
</style>
<meta charset="utf-8" />
<title>选项卡</title>
<!-- 引入tab.js -->
<script type="text/javascript" src="../js/tab.js" ></script>
<script>
window.onload = function(){
var tab1 = new Tab("tabBox1");
var tab2 = new Tab("tabBox2");
}
</script>
</head>
<body>
<div class="tab" id="tabBox1">
<input type="button" value="主页" class="active" />
<input type="button" value="说说" />
<input type="button" value="日志" />
<div style="display:block;">这是主页内容</div>
<div>这是说说内容</div>
<div>这是日志内容</div>
</div>
<br />
<div class="tab" id="tabBox2">
<input type="button" value="技术" class="active" />
<input type="button" value="工具" />
<input type="button" value="网站" />
<div style="display:block;">Js、Vue</div>
<div>VSCode</div>
<div>CSDN</div>
</div>
</body>
</html>
再来简单总结一下JS面向对象中的this，this一般会在两种情况下出问题，一是使用定时器、二是事件，从上面的例子中也可以看出来。注意下面的说法是在构造函数里哦，其它情况下，this指向的是调用者。
可以看到效果没有将姓名显示出来，其实看到这里原因应该很清楚了，就是第14行代码中this.name，此处的this指向谁？指向window，因为setInterval是属于window的。
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<head>
<script>
function Person(name){
this.name = name;
//定时器
setInterval(this.showName, 3000);
}
Person.prototype.showName = function(){
alert(this); //window
alert("姓名："+this.name);
}
var p1 = new Person("jiangzhou");
</script>
</head>
</html>
解决办法：上面例子中已经列出来了，就是用一个function将要执行的代码包起来，使其所属关系不会发生变化，注意function里调用方法时使用的是外部变量'_this'。事件的处理在上面的例子中已经说明了。
function Person(name){
this.name = name;
var _this = this;
setInterval(function(){
this.showName();
}, 3000);
}
Person.prototype.showName = function(){
alert(this); //[Object Object]
alert("姓名："+this.name); //姓名：jianghzou
}
var p1 = new Person("jiangzhou");
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JS实现的最简Table选项卡效果
本文实例讲述了JS实现的最简Table选项卡效果.分享给大家供大家参考.具体如下: 这是一款最简易的Table选项卡,是基于Table表格的,非DIV结构,习惯表格的朋友可能会喜欢本选项卡,部分修饰仍然用的是Table,比如表格边框.背景颜色等,个人感觉好像用Table比用DIV结构代码更精简一些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-z-simple-tab-nav-menu-codes/ 具体代码如下: <html> &l
-
javascript实现tabs选项卡切换效果(自写原生js)
现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下: html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</
-
JS+CSS实现的经典tab选项卡效果代码
本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
-
js基于面向对象实现网页TAB选项卡菜单效果代码
本文实例讲述了js基于面向对象实现网页TAB选项卡菜单效果代码.分享给大家供大家参考.具体如下: 这是一款自动的网页TAB,基于面向对象的选项卡菜单,由于时间关系只做了简单的实现,界面没有美化,不多做介绍了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
-
原生js实现tab选项卡切换
本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分 <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre
-
js实现tab选项卡函数代码
* { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b
-
JS使用面向对象技术实现的tab选项卡效果示例
本文实例讲述了JS使用面向对象技术实现的tab选项卡效果.分享给大家供大家参考,具体如下: 运行效果图如下: 代码如下: html: <ul class="scrollUl"> <li id="m01" class="sd01" value="0"><a href="#" rel="external nofollow" rel="external
-
4种JavaScript实现简单tab选项卡切换的方法
本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法,分享给大家供大家参考,具体内容如下 效果图: 方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/cs
-
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
本文实例讲述了JS实现滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来,有些同志曾经为同一个页面布置两个滑动门而烦恼,参考一下本例子,相信你会找到答案,而且有各种排列方式的选项卡,总有一款会满足你. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-move-tab-nav-menu-demo-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
JS实现简单的tab切换选项卡效果
本文实例讲述了JS实现简单的tab切换选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <m
-
js简单实现竖向tab选项卡的方法
本文实例讲述了js简单实现竖向tab选项卡的方法.分享给大家供大家参考.具体如下: 选项卡占据左边,而内容放在右边,一个适合新手的竖向的tab选项卡特效例子 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title>