思路，先通过js点击事件实现功能，然后
//1.取消函数嵌套
//2.添加全局变量
//3.onload变构造函数（添加new）
4.把函数该为原型对象上的方法,把全局变量改为构造函数中的属性,然后修改this
5.函数定义的方法变化
tab.prototype.click = function (obt){ }
原版
<!DOCTYPE html>
<html>
<head>
<title>选项卡1</title>
<!-- 仅仅是实现了功能 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.btn{
overflow: hidden;
}
.btn li{
width: 50px;
height: 30px;
background-color: #000;
list-style: none;
float: left;
color: white;
border-radius: 20px;
text-align: center;
line-height: 30px;
margin-top: 10px;
margin-left: 10px;
cursor: pointer;
}
.btn .active{
background-color: red;
}
#content li{
width: 300px;
height: 200px;
border: 1px solid #000;
margin: 10px;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var obtn=document.getElementById('btn').children;
var ocon=document.getElementById('content').children;
for (var i = 0; i < obtn.length; i++) {
obtn[i].index = i;
obtn[i].onclick= function(){
for (var j = 0; j < obtn.length; j++) {
obtn[j].className='';
ocon[j].style.display='none';
}
obtn[this.index].className='active';
ocon[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<ul id="btn" class="btn">
<li class="active">btn1</li>
<li>btn2</li>
<li>btn3</li>
<li>btn4</li>
</ul>
<ul id="content">
<li style="display: block;">nei1</li>
<li>nei2</li>
<li>nei3</li>
<li>nei4</li>
</ul>
</body>
</html>
改造成面向对象了，
取消函数的嵌套 2.添加全局变量
<!DOCTYPE html>
<html>
<head>
<title>选项卡</title>
<!-- 取消函数的嵌套
2.添加全局变量
onload变构造函数
-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.btn{
overflow: hidden;
}
.btn li{
width: 50px;
height: 30px;
background-color: #000;
list-style: none;
float: left;
color: white;
border-radius: 20px;
text-align: center;
line-height: 30px;
margin-top: 10px;
margin-left: 10px;
cursor: pointer;
}
.btn .active{
background-color: red;
}
#content li{
width: 300px;
height: 200px;
border: 1px solid #000;
margin: 10px;
display: none;
}
</style>
<script type="text/javascript">
var obtn = null;
var ocon = null;
window.onload = function(){
new tab();
}
function tab(){
obtn=document.getElementById('btn').children;
ocon=document.getElementById('content').children;
for (var i = 0; i < obtn.length; i++) {
obtn[i].index = i;
obtn[i].onclick = click;
//注意点，调用函数的时候不需要加括号
}
}
function click(){
for (var j = 0; j < obtn.length; j++) {
obtn[j].className='';
ocon[j].style.display='none';
}
obtn[this.index].className='active';
ocon[this.index].style.display='block';
}
</script>
</head>
<body>
<ul id="btn" class="btn">
<li class="active">btn1</li>
<li>btn2</li>
<li>btn3</li>
<li>btn4</li>
</ul>
<ul id="content">
<li style="display: block;">nei1</li>
<li>nei2</li>
<li>nei3</li>
<li>nei4</li>
</ul>
</body>
</html>
换成this
<!DOCTYPE html>
<html>
<head>
<title>选项卡</title>
<!-- onload变构造函数
4.把函数该为原型对象上的方法,
把全局变量改为构造函数中的属性,
然后修改this
函数定义的方法也得变化。
-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.btn{
overflow: hidden;
}
.btn li{
width: 50px;
height: 30px;
background-color: #000;
list-style: none;
float: left;
color: white;
border-radius: 20px;
text-align: center;
line-height: 30px;
margin-top: 10px;
margin-left: 10px;
cursor: pointer;
}
.btn .active{
background-color: red;
}
#content li{
width: 300px;
height: 200px;
border: 1px solid #000;
margin: 10px;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
new tab('btn','content');
}
function tab(btnid,contentid){
this.obtn=document.getElementById(btnid).children;
this.ocon=document.getElementById(contentid).children;
var _self = this;
for (var i = 0; i < this.obtn.length; i++) {
this.obtn[i].index = i;
//this.obtn[i].onclick = this.click;
//注意点，调用函数的时候不需要加括号
//this.obtn[i].onclick = this.click.bind(this,this.obtn[i]);
//方法一
this.obtn[i].onclick= function(){
console.log(_self);//tab对象
console.log(this);//具体点击的那个btn
_self.click(this);
}
//方法二
}
}
tab.prototype.click = function (obt){
for (var j = 0; j < this.obtn.length; j++) {
this.obtn[j].className='';
this.ocon[j].style.display='none';
}
this.obtn[obt.index].className='active';
this.ocon[obt.index].style.display='block';
}
</script>
</head>
<body>
<ul id="btn" class="btn">
<li class="active">btn1</li>
<li>btn2</li>
<li>btn3</li>
<li>btn4</li>
</ul>
<ul id="content">
<li style="display: block;">nei1</li>
<li>nei2</li>
<li>nei3</li>
<li>nei4</li>
</ul>
</body>
</html>