前面的话
面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡
图示说明
由图示结果看到,这是一个非常简单的选项卡.三个控制按钮利用点击事件分别控制三张不同的选项卡.选项卡用和区分,控制按钮用区分
html 代码
[1] 使用来的扩展性不高,需要根据实际情况谨慎使用
[2] 在中使用 javascript:; 来阻止默认的页面跳转行为
<div class="box" id="box">
<ul class="list">
<li class="in_active" style="background-color: lightgreen">
第一张选项卡
</li>
<li class="in" style="background-color: lightblue">
第二张选项卡
</li>
<li class="in" style="background-color: pink">
第三张选项卡
</li>
</ul>
<nav class="conList">
<a class="con_active" href="javascript:;">
第一个控制按钮
</a>
<a class="con" href="javascript:;">
第二个控制按钮
</a>
<a class="con" href="javascript:;">
第三个控制按钮
</a>
</nav>
</div>
CSS 代码
[1] 为 body,和进行默认样式重置
[2] 为当前选项卡设置 in_active 类名,设置: block
[3] 为当前控制按钮设置 con_active 类名,设置: 1px solid black
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list - style: none;
}
a {
color: inherit;
text - decoration: none;
}.box {
width: 500px;
text - align: center;
}
/*in为选项卡普通状态,默认不显示*/
. in ,
.in_active {
display: none;
height: 100px;
font - size: 50px;
line - height: 100px;
}
/*in_active为选项卡选中状态,选中后显示*/
.in_active {
display: block;
}.conList {
text - align: center;
line - height: 30px;
}
/*con为按钮普通状态,默认无轮廓*/
.con,
.con_active {
outline: 0;
}
/*con_active为按钮选中状态,选中后有1px的黑色轮廓*/
.con_active {
outline: 1px solid black;
}
javascript 代码
使用最常用的来,构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性,并且向构造函数传递选项卡对象参数
[1] 关于元素获取,变量设置和事件绑定都在中实现,作为实例属性
[2] 定义一个切换方法 switch,进行选项卡和控制按钮的同时切换,作为原型方法
[3] 把获取到的选项卡对象 oBox 作为参数传递到构造函数中
//构造函数
function Tab(obj) {
/*元素获取*/
//获取选项卡展示部分
this.oList = obj.getElementsByTagName('ul')[0];
this.aIn = this.oList.getElementsByTagName('li');
//获取选项卡控制部分
this.oConList = obj.getElementsByTagName('nav')[0];
this.aCon = this.oConList.getElementsByTagName('a');
/*变量设置*/
//选项卡张数
this.count = this.aIn.length;
//当前第几张
this.cur = 0;
var _this = this;
for (var i = 0; i < this.count; i++) {
//设置索引
this.aCon[i].index = i;
//给按钮添加事件
this.aCon[i].onclick = function() {
_this.cur = this.index;
_this.
switch ();
}
}
}
//原型方法
Tab.prototype.
switch = function() {
//去掉所有
for (var i = 0; i < this.count; i++) {
this.aIn[i].className = 'in';
this.aCon[i].className = 'con';
}
//显示当前
this.aIn[this.cur].className = 'in_active';
this.aCon[this.cur].className = 'con_active';
}
//获取选项卡元素
var oBox = document.getElementById('box');
//构造选项卡对象
var tab1 = new Tab(oBox);
最后
这是面向对象系列的最后一篇了,本系列的博文主要参照《javascript 高级程序设计》和《javascript 面向对象精要》.个人感觉《javascript 权威指南》中的面向对象部分写得过于生涩和追求完整,很多例子都过于庞大,实在是难以消化,故借鉴较少.也由于我才疏学浅,看不懂其中奥妙,可能再经过一段时间学习才能品出其中味道
最难的部分终于啃完
来源: http://www.cnblogs.com/xiaohuochai/p/5770457.html