方式一和方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 306px;
margin: 20px auto;
}
.tab-header{
list-style: none;
}
.clearfix:after{
content: '';
display: block;
height: 0;
font-size: 0;
visibility: hidden;
clear: both;
}
.tab-header li{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid red;
}
.tab-header li.select{
background: orange;
}
.tab-panel div{
display: none;
width: 304px;
height: 300px;
line-height: 300px;
border: 1px solid red;
text-align: center;
}
.tab-panel div.select{
display: block;
}
</style>
</head>
<body>
<!-- 方式一 -->
<!-- <div class="container">
<ul class="tab-header clearfix" id="tab-header">
<li class="select">电影</li>
<li>电视剧</li>
<li>综艺</li>
</ul>
<div class="tab-panel" id="tab-panel">
<div class="select">无间道</div>
<div>那年花开月正圆</div>
<div>天天向上</div>
</div>
</div> -->
<!-- 方式二 -->
<div class="container">
<ul class="tab-header clearfix" id="tab-header">
<li class="select">电影</li>
<li>电视剧</li>
<li>综艺</li>
</ul>
<div class="tab-panel" id="tab-panel">
<div class="item select">无间道</div>
<div class="item">那年花开月正圆</div>
<div class="item">天天向上</div>
</div>
</div>
<script>
var tab={
oLis:document.getElementsByTagName('li'),
//oDivs:document.getElementById('tab-panel').getElementsByTagName('div'), //方式一
oDivs:document.getElementsByClassName('item'), //方式二
fn:function(){
// 方式一：获取tagName
// for(var i=0;i<tab.oLis.length;i++){
// tab.oLis[i].ind=i;
// tab.oLis[i].onclick=function(){
// for(var j=0;j<tab.oLis.length;j++){
// tab.oLis[j].className='';
// tab.oDivs[j].className='';
// }
// this.className='select';
// tab.oDivs[this.ind].className = 'select';
// }
// }
//方式二：通过className获取
for(var i=0;i<tab.oLis.length;i++){
tab.oLis[i].ind=i;
tab.oLis[i].onclick=function(){
for(var j=0;j<tab.oLis.length;j++){
tab.oLis[j].className='';
tab.oDivs[j].classList.remove('select');
}
this.className='select';
tab.oDivs[this.ind].classList.add('select');
}
}
}
}
tab.fn();
</script>
</body>
<html>
方式三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 306px;
margin: 20px auto;
}
.tab-header{
list-style: none;
}
.clearfix:after{
content: '';
display: block;
height: 0;
font-size: 0;
visibility: hidden;
clear: both;
}
.tab-header li{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid red;
}
.tab-header li.select{
background: orange;
}
.tab-panel div{
display: none;
width: 304px;
height: 300px;
line-height: 300px;
border: 1px solid red;
text-align: center;
}
.tab-panel div.select{
display: block;
}
</style>
</head>
<body>
<div class="container">
<ul class="tab-header clearfix" id="tab-header">
<li class="select">电影</li>
<li>电视剧</li>
<li>综艺</li>
</ul>
<div class="tab-panel" id="tab-panel">
<div class="select item">无间道</div>
<div class="item">那年花开月正圆</div>
<div class="item">天天向上</div>
</div>
</div>
<script>
var tab={
oLis:document.getElementsByTagName('li'),
oDivs:document.getElementsByClassName('item'),
fn:function tabContent(){
for(var i=0;i< tab.oLis.length;i++){
tab.oLis[i].ind=i;
tab.oLis[i].onclick=function(){
for(var j=0;j<tab.oLis.length;j++){
//console.log(tab.oDivs[j])
tab.oLis[j].className='';
tab.oDivs[j].className='item';
console.log(tab.oDivs[j]);
}
this.className='select';
//console.log(tab.oDivs[this.ind]);
tab.oDivs[this.ind].className='item select';
}
}
}
}
console.log(tab.oLis);
console.log(tab.oDivs);
tab.fn()
</script>
</body>
</html>
