四个按钮点击出现不同的图片

最新推荐文章于 2024-04-25 20:22:26 发布

kangjksjd

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量1.5k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_39703462/article/details/77600353

版权

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
       .main div{
          width:500px;

       }
       .main p{
           width: 100px;
           height: 80px;
           background-color: gray;
           float: left;
           font-size: 30px;

       }
       img{
           width: 200px;
           height: 300px;
       }
   </style>

</head>
<body>
<div class="main">
<div class="two">
<p >三国演义</p>
<p >水浒传</p>
<p >西游记</p>
<p >红楼梦</p>
</div>

    <div class="three">
    <img src="img/2.jpg">
    </div>
    <div class="four">
        <img src="img/3.jpg">
    </div>
    <div class="five">
        <img src="img/4.jpg">
    </div>
    <div class="six">
    <img src="img/5.jpg">
</div>

</div>
</body>
<script type="text/javascript">

   var btn = document.getElementsByTagName('p');
   var showDiv = document.getElementsByTagName('img');



       function out(){
           btn[0].onclick = function(){
               showDiv[0].style.display='block';
                   showDiv[1].style.display = 'none';
                   showDiv[2].style.display = 'none';
                   showDiv[3].style.display = 'none';
       }

       }
       function out1(){
           btn[1].onclick = function(){
              showDiv[1].style.display='block';
                   showDiv[0].style.display = 'none';
                   showDiv[2].style.display = 'none';
                   showDiv[3].style.display = 'none';
       }


       }

       function out2(){
           btn[2].onclick = function(){
              showDiv[2].style.display='block';
                   showDiv[0].style.display = 'none';
                   showDiv[1].style.display = 'none';
                   showDiv[3].style.display = 'none';
       }


       }
       function out3(){
           btn[3].onclick = function(){
              showDiv[3].style.display='block';
                   showDiv[0].style.display = 'none';
                   showDiv[2].style.display = 'none';
                   showDiv[1].style.display = 'none';
       }


       }


out();
out1();
out2();
out3();

</script>
</html>

kangjksjd

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
四个按钮点击出现不同的图片

.main div{ width:500px; } .main p{ width: 100px; height: 80px; background-color: gray; float: left;
复制链接

扫一扫