继续阅读javascript中的链接 [英] Continue Reading Link in javascript

问题描述

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

I have one field like Biography which is having a text, and I need to show half (some) of the text of that field on first page and then continue reading link appears, after clicking that link remaining text will be displayed on the same page

我需要用HTML来实现. 谁能帮我吗?

I need to achieve that in HTML. Can anyone help me?

推荐答案

请注意，这是快速的原型制作.如果您使用的是jquery，则可以获得更好的续航里程.

Note that this is rapid prototyping. You can get better mileage if you are using 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>

如果您要从完整的文本开始，并且需要在客户端做所有事情:

If you are starting with the full block of text and need to do everything client side:

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

Biography first half
Biography second half

</div>

如果文本块中不包含标记html，则可以获取传记div的内容并在页面加载时对其进行处理

If the block of text contains no markup html, then, you can grab the contents of the biography div and manipulate it on page load

<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>

这篇关于继续阅读javascript中的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！