JavaScript的Tab切换
在网页设计中经常要用到tab切换，遂整理了一下常用的两种方法。
先看一下示例代码：
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
margin: 0;
padding: 0;
}
#title{
width: 306px;
overflow: hidden;
margin: 50px auto 0px;
}
#title h2{
width: 100px;
height: 30px;
border: 1px solid #000;
font-size: 30px;
text-align: center;
line-height: 30px;
float: left;
}
#con{
width: 304px;
border: 1px solid #000;
height: 200px;
margin: 0 auto;
}
#con li{
width: 304px;
height: 200px;
font-size: 40px;
color: #ccc;
line-height: 200px;
text-align: center;
list-style: none;
display: none;
}
.select{
background: #ccc;
}
#con .show{
display: block;
}
</style>
</head>
<body>
<div id="title">
<h2 class="select" >标题一</h2>
<h2>标题二</h2>
<h2>标题三</h2>
</div>
<ul id="con">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</body>
<script></script>
</html>
两种方法的主要区别是在js代码中，第一种是给每个点击对象一个下标，方便操作：
<script type="text/javascript">
var title=document.getElementById('title');
var hs=title.getElementsByTagName('h2');
// alert(hs.length);
var con=document.getElementById('con');
var lis=con.getElementsByTagName('li');
//for循环的作用是给每一个hs绑定一个点击事件，
for (var i = 0; i < hs.length; i++) {
hs[i].index=i;
hs[i].onclick=function() {
// alert(this);
for (var v = 0; v < hs.length;v++) {
hs[v].className='';
lis[v].className='';
};//清除所有的类名
this.className='select';
lis[this.index].className='show';
};
};
</script>
第二种方法是通过判断点击对象与展示对象的变量值相等时，进行操作。要注意用到关键字this。
<script>
var title=document.getElementById('title');
var hs=title.getElementsByTagName('h2');
// alert(hs.length);
var con=document.getElementById('con');
var lis=con.getElementsByTagName('li');
for (var` i = 0; i < hs.length; i++) {
//第一个for循环是给每一个h2都绑定一个点击事件
hs[i].onclick=function() {
for (var v = 0; v < hs.length; v++) {
//第二个for循环是去遍历判断哪一个是当前点击的对象
if (hs[v]==this) {
hs[v].className='select'
lis[v].className='show';
}else{
hs[v].className='';
lis[v].className='';
}
}
}
}
</script>
