Question

我想创建一个这样的幻灯片

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

我想创建20个按钮，以将每个按钮打开一个唯一的div。这20个按钮位于页面上的按钮上，并带有y滚动

div将占据整页。

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

  <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

Answer 1

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

此代码有效地显示/隐藏div，具体取决于单击的按钮。

它与div和按钮的className匹配，因此当单击按钮时，它会隐藏所有其他div，但显示相应的div（正如我所说，它与类名匹配）。

这是避免类重复的简单方法（例如，将“ show3”与“ fichier3”匹配）。

您可以忽略我的CSS，这只是为了使我的示例更清楚。

$(function(){
  //Initially load one of the divs as a placeholder
  $('.showDiv div').not('.showDiv, .show1, .showButton').hide();
});

$('button').click(function(){ 
  //Get the classname of the button clicked
  var buttonClassName = $(this).attr('class');

  //Get the corresponding div (use classname to match them)
  var divClassName = '.showDiv .'.concat(buttonClassName);

  //Hide all divs
  $('.showDiv div').hide();

  //Show the one you want
  $(divClassName).toggle();  
});

.showDiv div {
  height: 50px;
  padding-bottom: 10px;
}

.showButton {
  text-align: center;
  padding-top: 10px;
}

.fichier { background-color: blue; }
.fichier2 { background-color: red; }
.fichier3 { background-color: green; }
.fichier4 { background-color: purple; }

button {
  width: 80px;
  height: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showDiv">
  <div class="show1 fichier">

  </div>
  <div class="show2 fichier2">

  </div>
  <div class="show3 fichier3">

  </div>
  <div class="show4 fichier4">

  </div>
</div>
<div class="showButton">
  <button class="show1">fichier</button>
  <button class="show2">fichier2</button>
  <button class="show3">fichier3</button>
  <button class="show4">fichier4</button>
</div>

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

1 个答案: