tab切换
1.this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this永远指向其所在函数的所有者，如果没有所有者时，指向全局对象window。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
首先分析this所在的函数,是哪个对象调用的， 则该对象就是this所指向的对象。
2.
getElementById 通过id获取标签，
通过单击标题，让对应的div块的样式发生变化
单击之后，要先找到对应的div
document.getElementById(‘con1’) 获取id名为con1的标签
3.代码
<!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>
<h2>标题四</h2>
<h2>标题五</h2>
</div>
<ul id="con">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
<li>内容四</li>
<li>内容五</li>
</ul>
</body>
<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>
</html>
