0

我正在寻找一种在单击锚点时显示 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）显示：当锚处于活动状态时无？

4

4 回答 4

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

应该管用

于 2013-07-08T03:49:51.260 回答
0

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

你也可以使用 jQuery .hide() .show()

于 2013-07-08T03:45:26.083 回答
0

我不确定我是否正确理解了您的问题，但是如果您想在父元素被悬停时显示子元素，这样的事情应该可以工作：

.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>

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

于 2013-07-08T03:49:27.113 回答
0

已经很久了，但没有人明白这一点，所以我给你两分钱。

<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，而无需重新加载页面。带有 id 的锚#anchorid现在被认为是 CSS 的目标。将它与+.popup意味着“当该 id 也是当前目标锚时，选择紧跟在具有此 id 的元素之后的任何元素”。'+' 是强制性的，因为 achor 元素被认为只包含流元素，而 div 不是。

于 2020-11-01T22:32:41.823 回答