为什么单独一个的时候能正常隐藏，加多一个之后，第一个就不会隐藏了？

    <html> 

    <head> 

    <style> 
        .tab{ 

        border:1px solid  #f00; 

        width:400px; 

        height:100px; 

        background:#f60; 

        margin:auto; 

        padding:0px; 

        overflow:hidden; 

        position:relative; 

        left:0px; 

        top:0px 
        margin-bottom:30px;

    } 

    .tbb{ 

        border:1px solid  #f00; 

        width:400px; 

        height:200px; 

        background:#360; 

        margin:auto; 

        padding:0px; 

        overflow:hidden; 

        position:relative; 

        left:0px; 

        top:0px 

    } 

    </style> 

    <script> 
    H=400; 

    W=400; 

    id='timing_hidden' 

    function show_con(){ 

    var obj_nav=document.getElementById(id) 

    var n=20,t=50; 

    var timers=new Array(n); 

        for(var i=0;i<n;i++){( 

         function(){ 

          if(timers[i]) clearTimeout(timers[i]); 

          var j=i; 

          timers[i]=setTimeout(function(){ 

           obj_nav.style.display="none"; 

      

           },(i+1)*t); 

         } 

        )()}; 

    } 

    setTimeout("show_con()",6000); 

    H=400; 

    W=400; 

    id='timi_hidd' 

    function showb_con(){ 

    var bbb_bav=document.getElementById(id) 

    var n=20,t=50; 

    var btimer=new Array(n); 

        for(var i=0;i<n;i++){( 

         function(){ 

          if(btimer[i]) clearTimeout(btimer[i]); 

          var j=i; 

          btimer[i]=setTimeout(function(){ 

           bbb_bav.style.display="none"; 

      

           },(i+1)*t); 

         } 

        )()}; 

    } 

    setTimeout("showb_con()",6000); 

    </script> 

    </head> 

     

    <body> 
    
 <div id='timing_hidden' class='tab'> 提示：6秒钟后这个层自动隐藏，可自定义时间。 </div> <!--第一个-->
    
    
    
    
    
    
    
    
    
<div id='timi_hidd' class='tbb'>  提示：6秒钟后这个层自动隐藏，可自定义时间。 </div> <!--加多一个-->

    </body> 

    </html>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

3条回答默认最新

黑白猫妈 2021-07-08 10:12

关注

按照你的代码，问题在于变量名id赋值了两次，后一次的覆盖了前一次的，所以前一个div根本没取到，隐藏不生效，不想改代码结构的话，改一下变量名就可以了，如下：

<html>

<head>

    <style>
        .tab {

            border: 1px solid #f00;

            width: 400px;

            height: 100px;

            background: #f60;

            margin: auto;

            padding: 0px;

            overflow: hidden;

            position: relative;

            left: 0px;

            top: 0px margin-bottom:30px;

        }

        .tbb {

            border: 1px solid #f00;

            width: 400px;

            height: 200px;

            background: #360;

            margin: auto;

            padding: 0px;

            overflow: hidden;

            position: relative;

            left: 0px;

            top: 0px
        }
    </style>

    <script>
        H = 400;

        W = 400;

        id = 'timing_hidden'

        function show_con() {

            var obj_nav = document.getElementById(id)

            var n = 20, t = 50;

            var timers = new Array(n);

            for (var i = 0; i < n; i++) {
                (

                    function () {

                        if (timers[i]) clearTimeout(timers[i]);

                        var j = i;

                        timers[i] = setTimeout(function () {

                            obj_nav.style.display = "none";



                        }, (i + 1) * t);

                    }

                )()
            };

        }

        setTimeout("show_con()", 3000);

        H = 400;

        W = 400;

        bid = 'timi_hidd' //修改变量名

        function showb_con() {

            var bbb_bav = document.getElementById(bid)

            var n = 20, t = 50;

            var btimer = new Array(n);

            for (var i = 0; i < n; i++) {
                (

                    function () {

                        if (btimer[i]) clearTimeout(btimer[i]);

                        var j = i;

                        btimer[i] = setTimeout(function () {

                            bbb_bav.style.display = "none";



                        }, (i + 1) * t);

                    }

                )()
            };

        }

        setTimeout("showb_con()", 3000);

    </script>

</head>



<body>

    <div id='timing_hidden' class='tab'> 提示：6秒钟后这个层自动隐藏，可自定义时间。 timing_hidden</div>
    <!--第一个-->









    <div id='timi_hidd' class='tbb'> 提示：6秒钟后这个层自动隐藏，可自定义时间。timi_hidd </div>
    <!--加多一个-->

</body>

</html>