Question

我正在寻找一种在点击锚点时显示div的方法。我在我的页面上有一个html5 / php表单，当提交时将用户带到div中的锚点并带有感谢信息，这是激活该链接的唯一方法。那是我试图展示的div：

<div style="display:none">
  <span id="thankyou"></span>
  <p>Than you for your message. I will be in touch soon.</p>
</div>

当锚点处于活动状态时，有没有办法改变（可能使用CSS）display：none？

Answer 1

您可以尝试使用javascript隐藏和显示元素。以下是参考示例的链接 http://css-tricks.com/snippets/javascript/showhide-element/

你也可以使用jQuery .hide（）。show（）

Answer 2

我不确定我是否理解你的问题，但如果你想在父母被召唤时显示一个子元素，那么这样的事情应该有效：

.link-message {
   display:none;
}
a:hover .link-message {
   display:inline-block;
}

<a href="#">
  Sample Link 
  <div class="link-message">
    <span id="thankyou"></span>
    <p>Than you for your message. I will be in touch soon.</p>
  </div>
</a>

您还应该能够在页面中绝对定位链接消息容器。

Answer 3

<a href="javascript:void(0);" onclick="document.getElementById('dividhere').style.display='';">Show/Hide</a>

应该工作

Answer 4

已经很长时间了，但是没人能说清楚，所以我给你我的两分钱。

<style>
.popup { position: fixed; display: block; visibility: hidden; /* other styles */ }
#anchorid:target+.popup { visibility: visible; }
</style>

然后

<a href="#anchorid">Click to see the popup corresponding to the id</a>

<a name="anchorid" id="anchorid" class="clicked"></a>
<div class="popup">
  The contents of this popup is hidden until the link above is clicked.
</div>

<a name="anchorid2" id="anchorid2" class="clicked"></a>
<div class="popup">
  The contents of this popup is also hidden, and remains hidden until the anchor immediately preceding it becomes actively targeted.
</div>

现在会发生什么：当用户单击第一个链接时，href仅包含一个锚点，因此只需将其附加到地址栏中的URL，而无需重新加载页面。标识为#anchorid的锚点现在被CSS定位为目标。将其与+.popup组合表示“选择当该ID也是当前目标锚点时，在具有该ID的元素之后的任何元素”。 “ +”是强制性的，因为achor元素被认为仅包含flow元素，而div不包含。

如何在锚点处于活动状态时显示div？

4 个答案: