原生基础demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#tab{
border: 1px solid #ccc;
margin: 20px auto;
width: 403px;
border-top: none;
}
.list ul{
overflow: hidden;
}
.list li{
float: left;
padding-left: 28px;
padding-right: 28px;
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid rgb(197, 55, 86);
background: -moz-linear-gradient(top, #FEFEFE, #EDEDED);
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
border-right: none;
cursor: pointer;
}
.list li:first-child{
border-left: none;
}
#listCon{
height: 100px;
}
#listCon div{
padding:10px;
position:absolute;
display: none;
/* opacity:0;
filter:alpha(opacity=0); */
}
.list li:hover{
background: #fff;
border-bottom: none;
}
.list li.cur{
background: #fff;
border-bottom: none;
}
#listCon div.cur{
/* opacity:1;
filter:alpha(opacity=100); */
display: block;
}
</style>
</head>
<body>
<div id="tab">
<div class="list">
<ul>
<li class="cur">许嵩</li>
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
</div>
<div id="listCon">
<div class="cur">断桥残雪、千百度、幻听、想象之中</div>
<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
<div>被风吹过的夏天、江南、一千年以后</div>
<div>十年、K歌之王、浮夸</div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("tab");
var lis = oDiv.getElementsByTagName("li");
- var oDivCon = document.getElementById("listCon");
var lisDiv = oDivCon.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].index = i;
lis[i].onclick = function(){
show(this.index);
}
}
function show(a){
for(var j=0;j<lis.length;j++){
lis[j].className = "";
lisDiv[j].className = "";
}
lis[a].className = "cur";
lisDiv[a].className = "cur";
}
}
</script>
</body>
</html>
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].οnclick=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].οnclick=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].οnclick=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].οnclick=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>