<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<style>
.box{
width: 215px;
height: 150px;
}
.tab{
width: 215px;
height: 50px;
}
span{
float: left;
height: 50px;
padding: 0 30px;
border: 1px solid #333333;
text-align: center;
cursor: pointer;
}
.content div{
height: 100px;
width: 212px;
border: 1px solid #333333;
}
.tab_active{
background-color: #FF0000;
}
.show{
background-color: #c9c9c9;
display: block;
}
</style>
<div class="box">
<div class="tab">
<span class="tab_active">1</span>
<span>2</span>
<span>3</span>
</div>
<div class="content">
<div class="show">content1</div>
<div class="show" style="display: none;">content2</div>
<div class="show" style="display: none;">content3</div>
</div>
</div>
<script>
//jquery
// $(function(){
// $('span').click(function(){
// $(this).addClass('tab_active').siblings().removeClass('tab_active');
// var i = $(this).index();
// $('.content div').eq(i).css('display','block').addClass('show').siblings().css('display','none');
// });
// });
//JavaScript
var tabs = document.getElementsByTagName('span');
var contents = document.getElementsByClassName('content')[0];
var aaa= contents.getElementsByTagName('div');
for(var i = 0, len1 =tabs.length; i<len1; i++){
tabs[i].index = i;
tabs[i].onclick = function(){
for(var j = 0; j < tabs.length; j++){
tabs[j].className = "";
aaa[j].style.display = "none";
}
tabs[this.index].className = "tab_active";
aaa[this.index].style.display = "block";
}
}
</script>
</body>
</html>
JavaScript中第二行获取ClassName时得到的是一个list,无论拥有这个class的元素是一个还是多个,均会是一个list,而在接下来获取contents的子元素时,js不知道获取的list中的哪个,所以需要在获取到classname为“content”的元素时加了[0]。所以最好使用id来标记元素,那样不需考虑获取的元素是不是list。
jQuery在使用中能极大的减少代码量,但是需要理解var i = $(this).index();这句代码,它的作用是获取被点击的标签的索引值,这个索引值先保存到i中,在之后的显示标签时,能确定相对应的内容。
在content中,如果每个div的状态样式都是一样的,就可以设为同样的class,不需再js或jQuery中单独设置它。