<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div,ul,li {
margin: 0;
padding:0;
font-size: 12px;
font-family: "微软雅黑";
}
ul,li {
list-style: none;
}
html,body {
-webkit-user-select:none;
}
#tab {
margin:10px auto;
width: 800px;
}
#tab ul {
position: relative;
top:1px;
z-index: 2;
}
#tab li {
float:left;
margin-left: 10px;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
background-color: #996;
border:1px solid red;
border-bottom: none;
}
#tab li.lixz {
background-color: #f9f;
}
#tab div{
width: 800px;
height: 300px;
line-height: 300px;
font-size: 36px;
text-align: center;
clear: both;
border:1px solid red;
display: none;
background-color: #996;
}
#tab div.divxz {
display: block;
background-color: #f9f;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="lixz">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
<li>选项卡5</li>
</ul>
<div class="divxz">选项卡1对应的div</div>
<div>选项卡2对应的div</div>
<div>选项卡3对应的div</div>
<div>选项卡4对应的div</div>
<div>选项卡5对应的div</div>
</div>
<script type="text/javascript">
//当点击某一个选项卡的时候,我们要做这样一件事情:、
//首先让所有的li和对应的div都没有选中的样式
//在让当前的那个选中样式
//第一步要操作谁就先获取谁
var oTab=document.getElementById('tab');
var oLis=oTab.getElementsByTagName('li');
var oDivs = oTab.getElementsByTagName('div');
//第二步
function tabChange(nIndex){
//nIndex:你告诉我当前被选中的那个li的索引
for(var i = 0;i<oLis.length;i++){
oLis[i].className=null;
oDivs[i].className=null;
alert(oDivs[i].className)
}
oLis[nIndex].className="lixz";
oDivs[nIndex].className="divxz";
}
//第三步:计划做好后就该执行了
//错误写法
// for(var i = 0 ; i<oLis.length;i++){
// oLis.item(i).onclick=function(){
// tabChange(i)
// }
// }
/*函数只执行的时候才有意义,没有执行前没有任何意义的作用
oLis.item[0].onclick=function(){
tabChange(i)
}
oLis.item[1].onclick=function(){
tabChange(i)
}
……
只有当页面上的js代码都执行完了我们才能点击li触发,而此时循环中的i已经变成最后的那个5了、
所以我们触发方法后面的那个匿名函数的时候,里面的i永远是5,导致了我们原本的需求没有实现
*/
// 正确解答方法
// 1)自定义属性方式
// 我们知道执行的时候那个i已经变了,但是我们还需要把索引传过去,那么我们就干一件事,给5个li设置自定义属性,把对应的索引保存上,这样点击执行的时候我们只需要得到当前属性值就可以了
// for(var i=0;i<oLis.length;i++){
// //设置自定义属性
// oLis[i].zxtIndex=i;
// oLis[i].onclick=function(){
// tabChange(this.zxtIndex)
// }
// }
//2)闭包方式写法
for(var i=0;i<oLis.length;i++){
;(function(n){
oLis[n].onclick=function(){
tabChange(n)
}
})(i)
}
</script>
</body>
</html>