javascript - 继续阅读 javascript 中的链接

Question

我有一个像 Biography 这样有文本的字段，我需要在第一页上显示该字段的一半(部分)文本，然后继续阅读链接出现，单击该链接后，剩余文本将显示在同一页

我需要在 HTML 中实现它。谁能帮帮我？

Answer 1

请注意，这是快速原型(prototype)制作。如果您使用 jquery，您可以获得更好的里程数。

<div>

<span> Biography, first half ...</span>
<a href="javascript:showAll('bioSecondHalf')">Continue reading</a>

<span id="bioSecondHalf" style="display:none"> Biography, second half</span>

</div>

<script type="text/javascript">
   function showAll(id) {
      document.getElementById(id).style.display = "block";
   }
</script>

如果您从完整的文本 block 开始并且需要在客户端完成所有操作:

<div id="biography" style="display:none">

Biography first half
Biography second half

</div>

如果文本 block 不包含标记 html，那么，您可以获取传记 div 的内容并在页面加载时对其进行操作

<script>
window.onload = function() {
   var bioText = document.getElementById("biography").innerHTML;
   var bioFirstHalf = bioText.substring(0,bioText.length/2);
   var bioSecondHalf = bioText.substring(bioText.length/2);
   document.getElementById("biography").innerHTML = bioFirstHalf + " <a href='javascript:showAll(\"bioSecondHalf\")'>Continue reading</a>" + " <span id='bioSecondHalf' style='display:none'>" + bioSecondHalf + "</span>"
}
</script>