HTML之DIV层的隐藏和显示 -- 实现换一批效果

ゝ一纸荒年。 2021-11-17 06:26 276阅读 0赞

<div id="movie1" style="display:block;">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    </div>
    <div id="movie2" style="display:none;">
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    </div>
    <div id="movie3" style="display:none;">
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    </div>
    <input type="button" onclick="javascript:divrefresh();" value="换一批" />
    <script type="text/javascript">
    function divrefresh(){
       var m1=document.getElementById('movie1');
       var m2=document.getElementById('movie2');
       var m3=document.getElementById('movie3');
       if(m1.style.display=='block'){
          m1.style.display='none';
          m2.style.display='block';
       }else if(m2.style.display=='block'){
          m2.style.display='none';
          m3.style.display='block';
       }else{
          m3.style.display='none';
          m1.style.display='block';
       }
    }
    </script>
    
    
    <html>
    <head>
    换一批
    </head>
    <body>
        <div id="box1" style="">
            111</div>
        <div id="box2" style="display: none">
            222</div>
        <div id="box3" style="display: none">
            333</div>
        <button class="btn1" id="button">
            按扭</button>
        <script type="text/javascript">
            var i = 0;
            document.getElementById('button').onclick = function () {
                var a = document.getElementsByTagName('div'), l = a.length;
                a[i++].style.display = 'none';
                if (i >= l) i = 0;
                a[i].style.display = 'block';
            }  
        </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS如何控制DIV层实现显示和隐藏

![bc1d3c989defdbead2478db73330846b.jpeg][] 本文给大家带来了CSS控制DIV层显示和隐藏的方法，是前端学习必须要掌握的基础知识，非常

古城微笑少年丶/ 2024年03月23日 00:22/ 0 赞/ 85 阅读

相关 div用css显示隐藏的效果

<div> <a href="">一级导航</a> <p> <a href="">二级导航</a>

拼搏现实的明天。/ 2022年10月16日 08:44/ 0 赞/ 173 阅读

相关 html 层显示隐藏闪烁,onmouseover/out 显示隐藏指定div 无闪烁问题

![21db255f698c645531a1c07ff9b06c5e.gif][] 从下面的这个例子中(可下载)可以了解到如何用onmouseover 显示指定div(htm

曾经终败给现在/ 2022年10月06日 07:51/ 0 赞/ 171 阅读

相关 JS+CSS简单实现DIV遮罩层显示隐藏

http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html [JS+CSS简单实现DIV遮罩层显示隐藏]

忘是亡心i/ 2022年07月16日 08:15/ 0 赞/ 300 阅读

相关 jQuery换一批

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery换一批</title>

灰太狼/ 2022年04月22日 05:34/ 0 赞/ 270 阅读

相关 jquery实现div模块的隐藏和显示

-------------------- 1、点击按钮 <button id="fat-btn" class="btn btn-primary" type="bu

深碍√TFBOYSˉ_/ 2022年02月24日 12:28/ 0 赞/ 324 阅读

相关 JQuery隐藏和显示效果

1：引用插件jquery-3.2.1.min.js： 2：为了方便看出效果和美观，在外层放一个div盒子，给这个盒子设置一些样式：比如边距，边框，宽，高，

朴灿烈づ我的快乐病毒、/ 2021年12月20日 13:55/ 0 赞/ 357 阅读

相关 div 显示与隐藏

最近写项目用到DIV隐藏,以下引用[http://www.cnblogs.com/dotLive/archive/2007/04/04/699302.html][http_ww

我不是女神ヾ/ 2021年12月17日 15:45/ 0 赞/ 444 阅读

相关 HTML之DIV层的隐藏和显示 -- 实现换一批效果

<div id="movie1" style="display:block;"> <a href="">1</a> <a href="">2</a>

ゝ一纸荒年。/ 2021年11月17日 06:26/ 0 赞/ 277 阅读

相关隐藏DIV 显示DIV

　　昨天做项目，用到了隐藏和显示DIV，在页面加载的时候，默认隐藏，当触发一个服务器控件时，显示此DIV，然后对此操作完成后，在点击DIV上服务器控件隐藏DIV，方法很简单，可

╰+攻爆jí腚メ/ 2021年11月01日 23:02/ 0 赞/ 483 阅读