tab选项卡
今天学了个选项卡的写法，思路是这样的：
1.获取所有选项卡节点，一般是li节点集合
2.单击每个tab时，显示出对应的tab内容
首先一个难题是，怎样将tab选项（li）跟tab内容(div)对应起来呢？很简单，我们知道，li跟div的长度是一样的，那么，也就是说，li[i]对应的就是div[i]了。
好，我们先构建好结构。结构如下：
<style type="text/css">
* {
margin: 0px;
padding:0px;
}
ul {
list-style-type:none;
}
#tab {
width:302px;
margin:20px auto;
}
#tab .nav {
width:300px;
height:30px;
border:1px solid #ccc;
}
#tab .nav li {
float:left;
height:30px;
border-right:1px solid #999;
}
#tab .nav li a {
float:left;
height:30px;
line-height:30px;
padding:0 20px;
color:#fc0;
text-decoration:none;
}
#tab .nav li a:hover {
background:#968;
}
#tab .box {
width:300px;
height:200px;
border:1px solid #ccc;
border-top:none;
}
.active {
background:#968;
}
.content {
display:none;
}
</style>
</head>
<body>
<div id="tab">
<!--tab选项-->
<ul class="nav">
<li class="active"><a href="#">tab1</a></li>
<li><a href="#">tab1</a></li>
<li><a href="#">tab1</a></li>
</ul>
<!--tab内容-->
<div class="box">
<div class="content">
this is tab1
</div>
<div class="content">
this is tab2
</div>
<div class="content">
this is tab3
</div>
</div>
</div>
根据思路，我们首先需要获取到nav下的所有li节点，由于在这个结构中，li就那3个，所以，你可以直接document.getElementsByTagName获取也可以先获取到tab节点，再通过tab.getElementsByTagName获取，这样应该获取速度应该会较快。
接着，要获取对应的div，在这个结构中是class为content的div，可以通过类名获取到这个节点集合，关于获取getElementsByClassName函数详见：http://www.cnblogs.com/littledu/articles/2026116.html
到目前为止，JS代码如下：
var tab = document.getElementById('tab');
var list = tab.getElementsByTagName('li');
var contents = getElementsByClass('content',tab);
现在，我们就可以遍历每一个li，然后给每一个li添加一个onclick事件，在这个事件里，切换选项卡内容，我们通过代码来解释，如下：
for(var i=0;i<list.length;i++){ //遍历li节点
list[i].index = i; //给每一个li挂接一个标识，以避开闭包带来的影响
list[i].onclick = function(){ //给每一节点添加单击事件
for(var j = 0; j < list.length; j++){ //再次遍历，将默认的属性重置
list[j].className = '';
contents[j].style.display = 'none';
}
list[this.index].className = 'active'; //切换样式
contents[this.index].style.display = 'block'; //显示内容
}
}
上面的代码利用了属性值进行识别，还有一种更好的方法，利用匿名函数立即执行，达到相同的效果，见代码：
for(var i=0;i<list.length;i++){
(function(i){
list[i].onclick = function(){
for(var j = 0; j < list.length; j++){
list[j].className = '';
contents[j].style.display = 'none';
}
list[i].className = 'active';
contents[i].style.display = 'block';
}
})(i)
}
这样，就已经可以了。最后，放上完整实例，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript">
window.onload = function(){
var tab = document.getElementById('tab');
var list = tab.getElementsByTagName('li');
var contents = getElementsByClass('content',tab);
contents[0].style.display = 'block';
for(var i=0;i<list.length;i++){
list[i].index = i;
list[i].onclick = function(){
for(var j = 0; j < list.length; j++){
list[j].className = '';
contents[j].style.display = 'none';
}
list[this.index].className = 'active';
contents[this.index].style.display = 'block';
}
}
}
function getElementsByClass(className,node){
node = node || document;
if(node.getElementsByClassName){
return node.getElementsByClassName(className);
}
var nodes = node.getElementsByTagName("*");
var ret = new Array();
for(var i = 0; i < nodes.length; i++){
if(hasClass(nodes[i],className)){
ret.push(nodes[i]);
}
}
return ret;
}
function hasClass(node,className){
var classes = node.className.split(/\s+/);
for(var i = 0; i < classes.length; i++){
if(classes[i] == className){
return true;
}
}
return false;
}
</script>
<style type="text/css">
* {
margin: 0px;
padding:0px;
}
ul {
list-style-type:none;
}
#tab {
width:302px;
margin:20px auto;
}
#tab .nav {
width:300px;
height:30px;
border:1px solid #ccc;
}
#tab .nav li {
float:left;
height:30px;
border-right:1px solid #999;
}
#tab .nav li a {
float:left;
height:30px;
line-height:30px;
padding:0 20px;
color:#fc0;
text-decoration:none;
}
#tab .nav li a:hover {
background:#968;
}
#tab .box {
width:300px;
height:200px;
border:1px solid #ccc;
border-top:none;
}
.active {
background:#968;
}
.content {
display:none;
}
</style>
</head>
<body>
<div id="tab">
<!--tab选项-->
<ul class="nav">
<li class="active"><a href="#">tab1</a></li>
<li><a href="#">tab1</a></li>
<li><a href="#">tab1</a></li>
</ul>
<!--tab内容-->
<div class="box">
<div class="content">
this is tab1
</div>
<div class="content">
this is tab2
</div>
<div class="content">
this is tab3
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号