时间戳

首页 > 解决方案 > 按下一个按钮到一个 css div 块

html - 按下一个按钮到一个 css div 块

问题描述

我正在做一个网站。

我有一个 div 块

<div id="table_and_dqinfo" class="table_and_dqinfo">
    <div id="dqdiv" class="dqinfo">
        <h4 class="centertext">Information Pane</h4>
        <div id="dqdiv_volgraph"></div>
    </div>
</div>

dqdiv_volgraph是具有图像链接的图像块。

我不想把上面的 div 块放到 CSS 中直接在网站上显示图片，我想放一个 CSS 按钮，这样只有在我按下按钮后，它才会打开上面的 div 块以在网站上显示图片.

谁能给我一些关于如何做的提示？

标签： htmlcss

解决方案

这是你想要的吗？

我使用复选框和标签作为按钮。

当您单击标签时，它会选中复选框，然后使用+CSS 的兄弟选择器 ( )

input:checked + #dqdiv_volgraph{
      display:block;
  }

#dqdiv_volgraph我切换div的可见性

根据您的项目随意设置label标签样式并使其看起来像一个按钮

注意 和的属性for应该相同labelidinput

input,
#dqdiv_volgraph {
  display: none;
}

label {
  border: 1px solid black;
  padding: 5px;
  cursor: pointer;
}

input:checked+#dqdiv_volgraph {
  display: block;
}
<div id="table_and_dqinfo" class="table_and_dqinfo">
  <div id="dqdiv" class="dqinfo">
    <h4 class="centertext">Information Pane</h4>
    <input id="checkb" type="checkbox">
    <div id="dqdiv_volgraph">
      <h1>Put image here</h1>
      <img src="https://placehold.it/200x200">
    </div>
    <label for="checkb"> Click me</label>
    
  </div>
</div>

推荐阅读