如何在单击按钮时显示div?

时间:2015-11-25 16:58:51

标签: javascript html css

这是我的CSS代码。我想设置显示,以便我的文本显示在div中。

div.divi
{display: none}

这是我的HTML代码。

    <!doctype html>
<html lang="nl">
    <head>
        <title>Over informatica en ik</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="opmaak.css">
    </head>
    <body>
        <div class="divi">
        <p class="groot">Informatica</p>
        <p>hoi</p>
        </div>

<button type="button"
onclick="document.getElementByClass('divi').style.display ='block'">
</button>


    </body>

</html>

2 个答案:

答案 0 :(得分:0)

只需将<div class="divi">替换为<div id="divi">,将CSS替换为div#divi{display: none}

或者,如果您希望将divi保留为类而不是ID,则可以将代码更新为以下内容:

<div class="divi">
    <button id="div3">
      <p class="groot">Informatica</p>
      <p>hoi</p>
</div>

<button type="button" onclick="document.getElementsByClassName('divi')[0].style.display='block'">Text</button>

答案 1 :(得分:0)

试试这个:

&#13;
&#13;
div.divi {
  display: none
}
&#13;
<div class="divi">
  <p class="groot">Informatica</p>
  <p>hoi</p>
</div>

<button type="button" onclick="document.getElementsByClassName('divi')[0].style.display ='block'; this.style.display = 'none';">
</button>
&#13;
&#13;
&#13;

告诉我它是否需要改进:)