在并排对齐的多个div中隐藏和显示div

Question

我正在处理onclick事件。 我希望每个单元格中都有许多onclick事件，并且我希望div的大小相等（无论数字如何），这意味着显示的文字为AND并且不是全屏显示，而是保持在边框的宽度之内，最重要的是，我想知道如何一次只打开一次单击事件。 例如，如果用户单击第一个，则我不希望第二个打开。

  function show() { if(document.getElementById('benefits').style.display=='none') { document.getElementById('benefits').style.display='block'; } return false; } function hide() { if(document.getElementById('benefits').style.display=='block') { document.getElementById('benefits').style.display='none'; } return false; } 

 #opener{ background-color: #07183d; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;} #benefits{ background-color: #07183d; border: none; color: white; padding: 15px 32px; text-decoration: none; display: inline-block; font-size: 16px;}} a{text-decoration:none;} a:visited{text-decoration:none;color: white;} #upbutton {border:1px dotted white; } 

  <div id="opener"><a href="#1" name="1" onclick=" show();">SOCIETES: 400</a></div> <div id="benefits" style="display:none;">Part CAC 40 : 15 700<br/>Part Filiales +100M€: 9 700<br/>% contacts IT: 21% <div id="upbutton"><a onclick=" hide();">fermer</a></div> </div> <div id="opener"><a href="#1" name="1" onclick=" show();">CONTACTS: 400</a></div> <div id="benefits" style="display:none;">Part CAC 40 : 15 700<br/>Part Filiales +100M€: 9 700<br/>% contacts IT: 21% <div id="upbutton"><a onclick=" hide();">fermer</a></div> </div> 

Answer 1

您要这样显示吗？ 还是要在显示其中一个后隐藏另一个？ 以下代码的工作方式：

• 我们将id更改为类，以应用相同的CSS样式，如下所示。
• 每个div标签可以有一个单独的ID，例如b1，b2，依此类推。 为此，我们可以通过为b1传递参数'1'，为b2传递参数'2'来调用hide和show函数。
• 当我们在javascript函数中获取ID时，只需将传递的参数附加“ b”即可。 示例：对于b1，当调用onclick时，javascript通过（'b'+ 1）获取ID为b1的ID，并分别为其应用css。 对show（）和hide（）都应用相同的条件，如下面的代码片段所示，它的工作原理是：

希望能帮助到你。

 function show(id) { if(document.getElementById('b'+id).style.display=='none') { document.getElementById('b'+id).style.display='block'; } return false; } function hide(id) { if(document.getElementById('b'+id).style.display=='block') { document.getElementById('b'+id).style.display='none'; } return false; } 

 .opener { background-color: #07183d; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .benefits { background-color: #07183d; border: none; color: white; padding: 15px 32px; text-decoration: none; display: inline-block; font-size: 16px; width:300px; } } a { text-decoration: none; } a:visited { text-decoration: none; color: white; } #upbutton { border: 1px dotted white; } 

 <div class="opener"><a href="#1" name="1" onclick=" show('1');">SOCIETES: 400</a></div> <div class="benefits" id="b1" style="display:none;">Part CAC 40 : 15 700<br/>Part Filiales +100M€: 9 700<br/>% contacts IT: 21% <div id="upbutton"><a onclick=" hide('1');">fermer</a></div> </div> <div class="opener"><a href="#1" name="1" onclick=" show('2');">CONTACTS: 400</a></div> <div class="benefits" id="b2" style="display:none;">Part CAC 80 : 30 923<br/>Part Filiales +300M€: 3 600<br/>% contacts cs: 51% <div id="upbutton"><a onclick=" hide('2');">fermer</a></div> </div>