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

最新推荐文章于 2021-06-04 19:40:46 发布

相思比梦长

最新推荐文章于 2021-06-04 19:40:46 发布

阅读量983

点赞数 1

分类专栏： WEB前端

本文链接：https://blog.csdn.net/netuser1937/article/details/97752871

版权

WEB前端专栏收录该内容

114 篇文章 2 订阅

订阅专栏

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

相思比梦长

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML之DIV层的隐藏和显示 -- 实现换一批效果

<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;">&lt...
复制链接

扫一扫