您的位置：首页 > Web前端 > JavaScript

tab选项卡（解决问题 i总是最后一个）

2016-04-04 17:11 591 查看
点击li之后弹出的都是2。
以上是找到的解决方案  ---
i总是最后一个

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
font-size:0;
}
.container{

}
.container .tab li{
display: inline-block;
width: 40px;
height: 20px;
color:red;
/*background-color: Grey;*/
border: 1px solid orangered;
border-right-width: 0;
}
.container .tab li:last-child{
border: 1px solid orangered;
}
.select{
background-color: Grey;
}
.container .tab li a{
text-decoration: none;

font-size:14px;
}
.container .content li{
/*display: block;*/
width: 400px;
height: 300px;
border: 1px solid gray;
font-size:14px;
display: none;
}
/*.mod{*/
/*display: none;*/
/*}*/
.container .content .live{
display: block;
}
</style>
</head>
<body>
<div class="container">
<ul class="tab">
<li class="select"><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
<li><a href="">item4</a></li>
</ul>
<ul class="content">
<li class="mod live">item1 content</li>
<li class="mod">item2 content</li>
<li class="mod">item3 content</li>
<li class="mod">item4 content</li>
</ul>
</div>
<script>
window.onload = function(){
var tab = document.getElementsByClassName('tab');
var tab_li = tab[0].getElementsByTagName('li');
var content = document.getElementsByClassName('content');
var content_li = content[0].getElementsByTagName('li');
for(var i=0;i<tab_li.length;i++){
/*?? 获取所有的li标签*/
var self = tab_li[i];
tab_li[i].onclick =(function() {
var self2 = self;
var item = i;
return function(){
/*??为什么self2 是对应的标签*/
//return test_alert(self2,item);
return showContent(self2,item);
};
})(i);
}
function showContent(_this,item){
for(var i=0;i<content_li.length;i++){
tab_li[i].className='';
content_li[i].className = '';
}
_this.className='select';
content_li[item].className = 'live';
/*return false??很重要的一点*/
return false;
}
/*测试对应的li标签*/
function test_alert(obj,len){
console.log(obj);
return false;
}
};
</script>
</body>
</html>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                tab选项卡
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航