TAb切换思路一:
判断是否为当前点击对象,来增加类名和减少类名
要在面向过程的基础上改写成面向对象的方法,需要经过四个步骤:
1、创建构造函数
2、将变量变成对象的属性
3、将函数变成对象的方法
4、实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab1_三种方法实现</title>
<style>
*{margin:0;padding:0; list-style: none;text-align: center;}
#tab,#tab2{width: 600px;margin:50px auto 0;}
#title{overflow: hidden;}
#title span{float: left;width:199px;height: 30px;border-right: 1px solid #EAEAEA;line-height: 30px;font-size: 22px;color:#333333;background: #FCFCFC;cursor:pointer;}
#content{height: 200px;overflow: hidden;background:#C8BBF8;}
#content li{height:200px;line-height: 200px;font-size: 80px;display: none;}
/*默认样式&点击后样式*/
#title .select{color:#FFFFFF;background: #0AA770;}
#content .show{display: block;}
</style>
</head>
<body>
<div id="tab">
<h1 id="title">
<span class="select">标题一</span>
<span>标题二</span>
<span>标题三</span>
</h1>
<ul id="content">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<div id="tab2">
<h1 id="title">
<span class="select">标题一</span>
<span>标题二</span>
<span>标题三</span>
</h1>
<ul id="content">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
/*面向过程写法:*/
/*var tit=document.getElementById('title');
var con=document.getElementById('content');
var spans=tit.getElementsByTagName('span');
var lis=con.getElementsByTagName('li');
//第一个for循环 给每一个span绑定点击事件
for (var i = 0, len= spans.length; i < len; i++){
spans[i].onclick=function(){
//第二个for循环 遍历找出当前点击是的span
for (var j = 0,len= spans.length; j < len; j++) {
if (spans[j]==this) {
this.className='select';
// spans[j].className='select';//效果同上
lis[j].className='show';
} else {//若没被选中清空设置
spans[j].className='';
lis[j].className='';
}
}
}
}*/
/*面向对象写法:*/
//1、创建构造函数
function Tab(targetID){
//2、把变量变成对象的属性
this.tab=document.getElementById(targetID);
this.spans=this.tab.getElementsByTagName('span');
this.lis=this.tab.getElementsByTagName('li');
var _this=this;//此时this指向实例对象
for (var i = 0; i < this.spans.length; i++) {
this.spans[i].onclick=function(){
_this.clickTab(this);//此时this指向点击的span
}
};
}
//3、把函数变成对象的方法
Tab.prototype.clickTab=function(target){//target指向点击的span
for (var i = 0; i < this.spans.length; i++) {
if (this.spans[i]==target) {//此时this指向实例对象
this.spans[i].className='select';
this.lis[i].className='show';
}else{
this.spans[i].className='';
this.lis[i].className='';
}
}
}
//4、实例对象-多处使用
var tab1=new Tab('tab');
var tab2=new Tab('tab2');
/*jQuery写法1:*/
/*$('#title span').click(function(){
var i=$(this).index();//获取当前元素索引值
$(this).addClass('select').siblings().removeClass('select');
$('#content li').eq(i).addClass('show').siblings().removeClass('show');
})*/
/*jQuery写法2:*/
/*$('#title span').click(function(){
var i=$('#title span').index(this);
$('#title span').eq(i).addClass('select').siblings().removeClass('select');
$('#content li').eq(i).addClass('show').siblings().removeClass('show');
})*/
</script>
</body>
</html>
TAb切换思路二:
获取当前点击对象的索引,直接给其增加类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab2_三种方法实现</title>
<style>
*{margin:0;padding:0; list-style: none;text-align: center;}
#tab,#tab2{width: 600px;margin:50px auto 0;}
#title{overflow: hidden;}
#title span{float: left;width:199px;height: 30px;border-right: 1px solid #EAEAEA;line-height: 30px;font-size: 22px;color:#333333;background: #FCFCFC;cursor:pointer;}
#content{height: 200px;overflow: hidden;background:#C8BBF8;}
#content li{height:200px;line-height: 200px;font-size: 80px;display: none;}
/*默认样式&点击后样式*/
#title .select{color:#FFFFFF;background: #0AA770;}
#content .show{display: block;}
</style>
</head>
<body>
<div id="tab">
<h1 id="title">
<span class="select">标题一</span>
<span>标题二</span>
<span>标题三</span>
</h1>
<ul id="content">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<div id="tab2">
<h1 id="title">
<span class="select">标题一</span>
<span>标题二</span>
<span>标题三</span>
</h1>
<ul id="content">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<script>
/*一、面向过程写法:*/
/*var tit=document.getElementById('title');
var con=document.getElementById('content');
var spans=tit.getElementsByTagName('span');
var lis=con.getElementsByTagName('li');
//第一个for循环 给每一个span绑定点击事件
for (var i = 0, len= spans.length; i < len; i++){
spans[i].index=i;//不同处:获取当前点击事件的索引值为后面设置绑定对象使用
spans[i].onclick=function(){
//第二个for循环 遍历找出当前点击是的span
//清空所有的绑定对象
for (var j = 0,len = spans.length; j < len;j++) {
spans[j].className='';
lis[j].className='';
}
//单独对点击事件绑定对象,索引值来自之前获取的
this.className='select';
lis[this.index].className='show';
}
}*/
/*面向对象写法:*/
//1、创建构造函数
function Tab(targetID){
// 2、把变量变成对象的属性
this.tab=document.getElementById(targetID);
this.spans=this.tab.getElementsByTagName('span');
this.lis=this.tab.getElementsByTagName('li');
this.prevIndex=0;//上次显示元素下标&第一次点击时需要清除样式的下标
var _this=this;//此时this指向实例对象
for (var i = 0; i < this.spans.length; i++) {
this.spans[i].index=i;
this.spans[i].onclick=function(){
_this.clickTab(this);//此时this指向点击的span
_this.prevIndex=this.index;//实现点击操作后,保存点击对象的下标
}
}
}
// 3、把函数变成对象的方法
Tab.prototype.clickTab=function(target){//target指向点击的span
//this.prevIndex-上次显示元素下标
this.spans[this.prevIndex].className='';
this.lis[this.prevIndex].className='';
this.spans[target.index].className='select';
this.lis[target.index].className='show';
}
//4、实例对象
var tab=new Tab('tab');
var tab2=new Tab('tab2');
</script>
</body>
</html>