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

最新推荐文章于 2021-12-22 18:39:25 发布

杨笑常

最新推荐文章于 2021-12-22 18:39:25 发布

阅读量802

点赞数

分类专栏： javascript 文章标签： javascript tab选项卡

本文链接：https://blog.csdn.net/u012918421/article/details/51057370

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1

2

3

4

5

6

 
      var 
      aLi = document.getElementsByTagName( 
      'li' 
      ); 
     
      for 
      ( 
      var 
      i = 0; i < aLi.length; i++){ 
     
      aLi[i].onclick =  
      function 
      (){ 
     
      alert(i); 
     
      } 
     
      }

点击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>