Question

我使用简单的div onclick show使用javascript，当你点击每个div时，它会显示该行中的下一个。

我怎么能一次制作多个div节目？在HTML中，我尝试将div名称更改为多个，例如（当您单击它时显示div q1 / q2 / q3）： -

<a class="hide" onclick="showdiv('q1, q2, q3'); " href="#">

但上述情况并没有奏效。

这是我目前的代码： -

JS

function showdiv(id){
document.getElementById(id).style.display = "table";
}

HTML

<a class="hide" onclick="showdiv('q1'); " href="#">
<div id="q0" class="circle-160 yellow-circle">
   <div class="circle-content">
       ENABLER: Internal risk management capability</div>
</div>
</a>

<a class="hide" onclick="showdiv('q2'); " href="#">
<div id="q1" class="circle-160 orange-circle">
   <div class="circle-content">
       Are you concerned about suppliers' capability to meet outcomes?</div>
</div>
</a>

<a class="hide" onclick="showdiv('q3'); " href="#">
<div id="q2" class="circle-160 orange-circle">
   <div class="circle-content">
       Are you concerned about financial risks associated with this project?</div>
</div>
</a>

Answer 1

如果我的问题是对的，你可以这样做：

function showdiv(){
   var divs = document.getElementsByClassName("myDivToShow");
   for (var i=0; i<divs.length; i++){ 
      divs[i].style.display = "table";
   }
}

将“myDivToShow”类添加到您要显示的所有div中。

Answer 2

你可以使用这样的show方法。

function showdiv(){
  for (var i = 0, j = arguments.length; i < j; i++) {
    document.getElementById(arguments[i]).style.display = "table";    
    }
}

然后你可以像这样使用它。

showdiv("q1","q2");

Answer 3

您可以使用jquery插件并简化您在javascript端的工作。使用div类值显示或隐藏div。

$('.hide').hide(); //this will hide all the div with class name "hide"
$('.hide').show(); //this will show all the div with class name "hide"
$('.hide').toggel(); //this will toggel the div visibility for all the div with class name "hide"

有一篇很好的文章涵盖了所有这些内容http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/。

显示多个div onclick show javascript

3 个答案: