我对面向对象的理解:
面向对象(oop)是一种编程的思想,它的优点便于管理,代码可维护性好;方便继承;适合封装,重功能,不重过程。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.container{font-size:40px;}
.container span.active{color:#f0f;}
.container div{width:200px;height:200px;background:#f00;display:none;}
.container div.active{display:block;}
</style>
</head>
<body>
<div class="container" id="container">
<p>
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</p>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
<script type="text/javascript">
new TabSwitch("container");
function TabSwitch(odiv){
var that = this;
this.container = document.getElementById(odiv);
this.tabs = this.container.getElementsByTagName("span");
this.views = this.container.getElementsByTagName("div");
for(var i = 0;i < this.tabs.length;i++){
this.tabs[i].index = i;
this.tabs[i].onclick = function(){
that.fnClick(that,this)
};
}
}
TabSwitch.prototype.fnClick = function(that,_this){
var _len = that.tabs.length;
for(var i = 0;i < _len;i++){
that.tabs[i].removeAttribute("class");
that.views[i].removeAttribute("class")
}
_this.className = "active";
that.views[_this.index].className = "active";
console.log(_this.index)
}
</script>
</html>