4

我的 250 页网站有一个包含许多单词及其定义的词汇表。我想找到一种方法，让词汇表中的单词在出现在网站文本中时突出显示，并在悬停时显示一个“工具提示”气泡，显示单词的定义。我的网站页面都是 html - 我没有使用 CMS。

我想我需要为此使用javascript。我看了又看，找到了可以突出显示某些文本的javascript函数（即将它包装在span标签中），但我不知道如何让它遍历单词数组并包含它们的定义，我'我不确定这会占用多少资源。

是否存在一个对我有用的词汇表类型程序，而无需手动更新整个网站中每个单词的每个实例？还是有一种相当简单的方法来实现这一目标？谢谢！

4

1 回答 1

5

这可以使用 JQuery 来完成，并将词汇表作为页面上的隐藏 div，如果需要，可以使用 AJAX 加载。

$("#glossary h2").each(function(index) {
  // Get the word and its definition.
  var word = $(this).text();
  var def = $("#glossary").find("p")[index].innerHTML;

  // Update all instances of that word in the content page with mouse over def.
  var contentHTML = $("#content").html();
  contentHTML = contentHTML.replace(new RegExp(word, 'g'), '<span title="' + def + '">' + word + '</span>');
  $("#content").html(contentHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">
  Will likes to hang out with Jim.
</div>

<div id="glossary" style="display:none;">
  <h2>Will</h2>
  <p>This is will's def.</p>
  <h2>Jim</h2>
  <p>This is jim's def.</p>
</div>

上面的函数假设你有一个<p>for each<h2>并且所有的内容<p>都是定义的一部分。

于 2012-04-11T14:46:18.210 回答