如何使用 # 链接到折叠的隐藏 tabindex 元素

Question

我正在编写一个词汇表，并制作了一个庞大的文件，其中包含隐藏文本（带有display:none）的列中的术语，采用纯 css/html 格式。

每个条目在代码中如下所示：<div class=w tabindex=0>Achidrupa<div class=tt>下面是隐藏的解释。</div></div>

我使用:focus 而不是:hover，所以解释在一种弹出窗口中保持打开，不使用Java 或JS。 由于有些条目的拼写略有不同，我喜欢引用主要条目，但不要使用相当笨拙的“See entry blah blah blah”。

所以，我喜欢制作内部链接，就像我们习惯在链接到元素中使用# 和名称或ID 一样。但是无论我尝试什么，我都无法从带有链接的打开窗口中打开另一个条目。我能得到一些帮助吗？非常感谢任何解决方案。

我相信我从一开始就没有把这个问题说得足够清楚。我有以下代码，包括 tabindex=0 和 css 中的 .w:focus .tt{display: inline-block ; cursor:pointer; }。

<div class=w tabindex=0 name="alpha">1ste 输入阿尔法<div class=tt> 跟随文本作为关于 alpha 的解释，在单击 Entry Alpha 后变得可见，否则它会使用 css display:none 保持隐藏。 [大概100字左右]</div></div>

<div class=w tabindex=0 name="beta"> Beta 版的第二个条目<div class=tt> 跟随文本作为 beta 的解释，点击后 <a href=#alpha>link 到条目 alpha </a>。 [大概100字左右]</div></div>

我需要的是当我点击打开的窗口Entry on beta并点击“链接到条目 alpha”时打开窗口 1st Entry Alpha 的可能性。

很抱歉，提供的 javascript 代码和 sn-p 不起作用。它不会打开任何焦点元素。顺便说一句，术语表在这种方式下效果很好，除了内部链接。

Answer 1

这是一个使用 javascript 的解决方案：获取哈希，找到具有相应名称的元素并聚焦它。整个内容都包含在 onload 中，否则浏览器不会聚焦该元素。

window.onload = function () {
  var hash = window.location.hash.substr(1);
  if (hash) {
      var target = document.getElementsByName(hash)[0].focus()
  }
}

.w {
  display: block;
  color: black;
  text-decoration: none;
}
.w > div {
  display: none;
}
.w:focus {
  outline: none;
}
.w:focus > div {
  display: block;
}

<a name="q1" href="#q1" class="w">
  Question ?
  <div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>
<a name="q2" href="#q2" class="w">
  Question ?
  <div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>
<a name="q3" href="#q3" class="w">
  Question ?
  <div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>