Question

我正在制作一个词汇表，并且制作了一个庞大的文件，其后面的列是隐藏文本（带有display:none）的列，用普通的css / html。

每个条目在代码中都是这样的：<div class=w tabindex=0> Achidrupa <div class=tt>以下是隐藏的解释。</div></div>

而不是:hover我使用:focus所以解释会在一个弹出窗口中保持打开状态，而不使用Java或JS。因为有些词条略有不同，我喜欢参考主要条目，但不是笨拙的“看见条目等等等等。”

所以，我喜欢制作内部链接，因为我们习惯使用链接到元素中的＃和name或id。但无论我尝试什么，我都无法通过链接从打开的窗口打开另一个条目。我可以得到一些帮助吗？非常感谢任何解决方案。

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

<div class=w tabindex=0 name="alpha"> 1th Entry Alpha <div class=tt> 跟随文本作为对alpha的解释，在点击Entry Alpha后变为可见，否则它将与css display:none保持隐藏。 [这里可能约有100个字。] </div></div>

<div class=w tabindex=0 name="beta">第2次测试版<div class=tt> 按照文字作为测试版的说明，点击后<a href=#alpha>链接到条目字母</a>。 [这里可能约有100个字。] </div></div>

我需要的是当我点击打开的窗口条目测试并点击“链接到条目alpha”时打开第一个条目Alpha的可能性。

很抱歉，但已发送的javascript代码和代码段不起作用。它不会打开任何重点元素。顺便说一句，除了内部链接之外，词汇表以这种方式运行良好。

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>

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

1 个答案: