时间戳

首页 > 解决方案 > 当超链接指向 HTML 的“详细信息”时，我们可以自动展开它吗？

html - 当超链接指向 HTML 的“详细信息”时，我们可以自动展开它吗？

问题描述

我正在创建一个包含语言信息的页面。由于它非常长，我用细节/摘要标签折叠每种语言，并将它们放在字母部分中，每个首字母也是折叠的细节。目前，每种语言的编码如下

  <details>
    <summary id="am"><b>am — Amharic</b></summary>
    <p><a href="/wp-content/uploads/2018/05/GBV-Amharic.jpg"><img src="/wp-content/uploads/2018/05/GBV-Amharic-150.jpg"/></a>About 22 million native speakers, … [more info]</p><br clear="all"/>
  </details>

如果我将链接放在其他地方，例如http://domain.TLD/path/#am，我想将用户带到该页面，滚动到该部分，然后展开详细信息。如果可能的话，我的一侧或两侧的语法是否错误？它现在不起作用- 没有任何扩展，它会转到页面顶部，就好像 # 不存在一样。但是地址字段显示了链接的完整 URI，包括#id。

" path/" 由 Wordpress 和/或 Wordpress-generated 解释.htaccess，所以也许这会以某种方式阻止它正常工作。

标签： htmlwordpresshyperlink

解决方案

您有正确的语法将用户定向到 id 为“am”的元素。

您可以使用 jQuery 检查浏览器用于显示页面的 URL。对于您的示例，如果链接将用户发送到http://domain.TLD/path/#am，如果浏览器包含“path/#am”作为 URL 的一部分，则会触发以下代码。

jQuery(document).ready(function($) {
    if(window.location.href.indexOf("path/#am")){
       /* do something to the element in jQuery -- likely apply a class.
       */
}

还有许多与 jQuery 相关的动画和滚动库。

推荐阅读