将多按钮连接到不同的唯一div,jQuery组按钮div

问题描述 投票:-1回答:1

我想创建这样的幻灯片显示

  https://codepen.io/pbutcher/pen/gKqKdv

我想创建20个按钮,以为每个按钮打开一个唯一的div。将这20个按钮放在页面上的按钮上,并带有y滚动y]

div将显示整页。

[我尝试了一些JavaScript,但是我希望当我单击按钮时,打开1格,然后关闭所有其他通过按钮打开的格]

  <html lang="en">

  <head>
  <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
    <link rel="stylesheet" href="apexV402.scss">
    <script 



src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
  </script>
  <script src="apexV402.js"></script>
   </head>

  <body>
  <div class="fichier">
  <div class="droite1">droite</div>
  <div class="gauche1">gauche</div>
  </div>

  <div class="fichier2">
  <div class="droite2">droite</div>
  <div class="gauche2">gauche</div>
   </div>

  <div class="fichier3">
  <div class="droite3">droite</div>
  <div class="gauche3">gauche</div>
   </div>

 <div class="fichier4">
  <div class="droite4">droite</div>
  <div class="gauche4">gauche</div>
  </div>
  <div class="poz1">
  <button class="show btna poz2">arme 2</button>
  <button class="show2 btna poz2">arme 1</button>
  <button class="show3 btna poz2">arme 1</button>
  <button class="show4 btna poz2">arme 1</button>
  <button class="show5 btna poz2">arme 1</button>
  <button class="show6 btna poz2">arme 1</button>
  <button class="show7 btna poz2">arme 1</button>
   </div>
   </body>

   </html>

    $(document).ready(function() {
    $(".show").click(function() {
    $(".fichier").toggle();
     });
     });


    $(document).ready(function() {
    $(".show2").click(function() {
    $(".fichier2").toggle();
      });
     });

    $(document).ready(function() {
    $(".show3").click(function() {
    $(".fichier3").toggle();
    });
     });

    $(document).ready(function() {
    $(".show4").click(function() {
    $(".fichier4").toggle();
        });
    });

     .fichier {
      display: none;
      position: absolute;
      height: 100%;
      width: 100%;
      }

    .fichier2 {
     display: none;
     position: absolute;
     height: 100%;
     width: 100%;
    }

     .fichier3 {
      display: none;
      position: absolute;
      height: 100%;
        width: 100%;
      }

       .fichier4 {
        display: none;
        position: absolute;
         height: 100%;
         width: 100%;
             }

     .poz1 {
     position: absolute;
     width: 50%;
     height: 64px;
      overflow-x: scroll;
      bottom: 0;
      right: 0;
       }

       .btna {
        width: 19%;
        height: 50px;
        }

      .droite1 {
       background: purple;
      float: right;
      width: 50%;
      height: 100%;
        }

     .gauche1 {
     background: orangered;
      float: left;
      width: 50%;
      height: 100%;
      }





      .droite2 {
      background: rgb(8, 223, 90);
      float: right;
      width: 50%;
      height: 100%;
     }

   .gauche2 {
    background: rgb(74, 11, 190);
    float: left;
    width: 50%;
    height: 100%;
      }

   .droite3 {
     background: blue;
     float: right;
     width: 50%;
     height: 100%;
      }

    .gauche3 {
    background: rgb(74, 11, 190);
    float: left;
    width: 50%;
    height: 100%;
    }

 .droite4 {
  background: rgb(8, 223, 90);
  float: right;
  width: 50%;
  height: 100%;
   }

   .gauche4 {
    background: rgb(74, 11, 190);
    float: left;
     width: 50%;
    height: 100%;
   }

我想看起来像这样,但有更多21个按钮

like this   https://codepen.io/pbutcher/pen/gKqKdv

我想创建一个像这样的幻灯片https://codepen.io/pbutcher/pen/gKqKdv我想创建20个按钮,为每个按钮打开一个唯一的div。这20个按钮放在页面上的按钮上,并带有...

jquery html button slideshow
1个回答
0
投票

更改此代码以实现您的目标。

© www.soinside.com 2019 - 2024. All rights reserved.