我想创建这样的幻灯片显示
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个按钮放在页面上的按钮上,并带有...
更改此代码以实现您的目标。