简化多个产品在每个孔的图像和信息之间切换-解网

问：

以下代码用于在图像和 3 个项目的信息之间切换，单击该项目的图像或信息按钮，但认为这是繁重的复制，并且必须有更好的方法来做同样的事情，如果我在一个页面上有 10 个项目，我会复制 javascript 7 次，略有更改。

  <!DOCTYPE html> 
   <html>
   <head>
   <script language="JavaScript" type="text/javascript">
   function openDetail(detailName) {
   var i;
   var x = document.getElementsByClassName("detail");

   for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";
   }
   document.getElementById(detailName).style.display = "block";

   }
   function openDetail1(detail1Name) {
   var i;
   var x = document.getElementsByClassName("detail1");

   for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";
   }
   document.getElementById(detail1Name).style.display = "block";

   }
   function openDetail2(detail2Name) {
   var i;
   var x = document.getElementsByClassName("detail2");

   for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";
   }
   document.getElementById(detail2Name).style.display = "block";

   }
   </script>

   <style>
   #contact-form-shopo {width: 670;padding: 10px;margin  }
   #contact-form-shop-blank {width: 330px;padding: 10px;margin :0px 0px 10px 5px;}

   #contact-form-shop {background-color: #fff;width: 330px;height:250px;  padding:      0px;margin :0px 0px 10px 5px;border: 4px solid #3d4f59;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;float:left; }
   #contact-form-shop h1 {font-size: 42px; margin:0px 0 0}
   #contact-form-shop h2 {text-align:center;width: 330px;padding: 0px;margin :0px 0px 10px px;margin-bottom: 15px;font-style: italic;font-weight: normal;font-size:20px;border-bottom: 4px solid #3d4f59;-moz-border-radius: 15px;-webkit-border-radius: 15px; }
   #contact-form-shop img {  display: block;
   margin-left: auto;
   margin-right: auto;}
   </style>
   </head>
   <body>


   <div>
   <h2> Options</h2></p>
   <div id="contact-form-shop"class="clearfix" width="50%"><H2>CP</H2>
   <div id="imginfo">
   <button class="button" onclick="openDetail('CPIMG')">Image</button>
   <button class="button" onclick="openDetail('CPINFO')">Info</button>
   </div>
   <div id="CPIMG" class="detail">Image: CP<br><img src="/images/x.jpg" alt="CP Image X"></div>
   <div id="CPINFO" class="detail" style="display:none">Information:</div>
   </div>
   <div id="contact-form-shop" class="clearfix" width="50%"><H2>Pye</H2> 
   <div id="imginfo">
   <button class="button" onclick="openDetail1('PYEIMG')">Image</button>
   <button class="button" onclick="openDetail1('PYEINFO')">Info</button
   </div>
   <div id="PYEIMG" class="detail1">Pye<br><img src="/images/y.jpg" alt="Pye Image Y"</div>
  </div>
  <div id="PYEINFO" class="detail1" style="display:none">Information:</div>
  </div>
  </div>

  <div id="contact-form-shop" class="clearfix"width="50%"><H2>Rage</H2> 
  <div id="imginfo">
  <button class="button" onclick="openDetail2('RAGEIMG')">Image</button>
  <button class="button" onclick="openDetail2('RAGEINFO')">Info</button
  </div>
  <div id="RAGEIMG" class="detail2">Image: RAGE<br><img src="/images/z.jpg" alt="RAGE Image Z"</div>
  <div id="RAGEINFO" class="detail2" style="display:none">Information:</div>
  </div>
  </div>
  </div>
  </div>

  </body>
  </html>

当按下适当的按钮时，每个项目的框和 javascript 在图像和每个项目的信息之间独立地滑动真的很简单，只是看起来非常重复，必须是一种更聪明的写作方式。

JavaScript HTML CSS 函数

答： 暂无答案

上一个：Javascript，在数组中创建元素并将属性设置为新元素

下一个：更快地获取类和函数的导入路径

简化多个产品在每个孔的图像和信息之间切换

Simplify for multiple products switching between image and information for each poroduct

评论