主页 / 问题 / 757838
Accepted
Vaagn Akopyan
Asked:2020-12-13 22:23:34 +0000 UTC2020-12-13 22:23:34 +0000 UTC

如何在按钮单击时获得 div 块？

  • 772

如何使当您单击站点上的“按钮”时，按钮下方会出现一个带有一些现成文本的 DiV 块？

javascript

3 个回答

  1. Best Answer

    将要打开的块设置为显示：无。使用 js，您在按钮上放置了一个处理程序，当按下该处理程序时，将 display: none 更改为 display: block。像这样的东西：

    function viewDiv(){
  document.getElementById("div1").style.display = "block";
};
    #div1{
  display: none;
}
    <input type="button" value="Click" onmousedown="viewDiv()">
<div id="div1">Блок</div>

    • 3

  2. 这也是一个有趣的例子（Jquery）

    $('.btn').click(function(){
  $(".block_with_text").fadeToggle(100);
});  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button class="btn">Кликни по мне</button>
<div class="block_with_text">Lorem ipsum dolor sit amet</div>

    • 3

  3. 或者，您可以不使用 js，这取决于具体的任务和能力。例如，借助隐藏的复选框和充当伪键的标签，切换 DIV 的可见性：

    .text,
input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked ~ .text {
  display: block;
}

/* Стилизация псевдокнопки */
.btn {
  display: inline-block;
  margin-bottom: 4px;
  padding: 4px 8px;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  cursor: pointer;
}
    <label for="pseudoBtn" class="btn">"Кнопка"</label>
<input type="checkbox" id="pseudoBtn">
<div class="text">Готовый текст</div>

    • 1

相关问题