Question

我有一个HTML div，

<div id="tab2" class="tab">
    <div class="alarm" id="alarm">
      <img src="src/alarm.jpg" style="width: 100%; height: 100%; background-size: contain;">
     </div>
 </div>

所以我想在点击按钮时打开这个div。我试着像这样添加一个按钮链接，

<a href="#tab2" class="button">Get Start</a>

但这不起作用。我怎样才能做到这一点。请帮帮我！

Answer 1

HTML代码：

<div id="tab2" class="tab" style="display:none;">
    <div class="alarm" id="alarm">
      <img src="src/alarm.jpg" style="width: 100%; height: 100%; background-size: contain;">
     </div>
 </div>

<a href="#tab2" class="button" onclick="showDiv()">Get Start</a>

使用Javascript：

function showDiv() {
   document.getElementById('tab2').style.display = "block";
}

Answer 2

尝试使用javascript

＆＃13;

<div id="tab2" class="tab" style="display: none;">
  <div class="alarm" id="alarm">
    <img src="src/alarm.jpg" style="width: 100%; height: 100%; background-size: contain;">
  </div>
</div>

<a href="#tab2" class="button" id="button1">Get Start</a>

<script>
  document.getElementById("button1").addEventListener("click", function() {
    document.getElementById("tab2").style.display = "block"
  });
</script>

＆＃13;

Answer 3

添加此css并尝试：

 #tab2{
   display:none;
  }

 #tab2:target{
   display:block;
  }

在HTML中添加一个div的按钮链接

3 个答案: