继续阅读 JavaScript 中的链接

2024-04-22

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

我需要在 HTML 中实现这一点。 谁能帮我?


请注意,这是快速原型设计。如果你使用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>

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

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

Biography first half
Biography second half

</div>

如果文本块不包含标记 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

继续阅读 JavaScript 中的链接 的相关文章

随机推荐

  • JTable JComboBox 第一项名称错误

    我添加了一个摇摆JComboBox to a JTable 但我的第一个项目的标签始终是javax swing JComboBox 我究竟做错了什么 更新 这是我的代码 import java awt Color import java a
  • 如何让 Pool.map 采用 lambda 函数

    我有以下功能 def copy file source file target dir pass 现在我想用multiprocessing立即执行此函数 p Pool 12 p map lambda x copy file x target
  • 核心音频指导/入门

    我一直在阅读 ios 4 的核心音频 目的是构建一个小测试应用程序 目前我对所有 api 的研究感到非常困惑 理想情况下 我想知道如何从两个 mp3 中提取多个样本到数组中 然后在回调循环中 我想将这些样本混合在一起并将它们发送到扬声器 苹
  • Delphi - MySQL 最好使用的数据感知组件

    我需要我的应用程序连接到我的 Web 服务器的 MySQL 数据库 最好的选择是什么 首选数据感知组件 我尝试了 zeos 7 但不断收到错误 SQL 错误 客户端不支持服务器请求的身份验证协议 考虑升级MySQL客户端 但未能修复 Tha
  • 在比较分支时,有没有办法在 GitHub 中“隐藏”合并提交? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我的 10
  • 如何使用 Junit 对 cordova 插件进行单元测试?

    我已经完成了一些 Cordova 插件 我想对其编写单元测试 这个想法是 例如 在我运行 cordova build android 后 测试文件将被移动到 Android 上的正确文件夹 我可以使用 Java 运行测试 那可能吗 我见过一
  • 如何根据单元格值使用颜色设置 Asp.net GridView 单元格的样式

    我有一个Gridview 它有一个名为student Class 网格视图上大约有 80 个类 我已使用 GroupBy 查询对此类进行分组 现在我想用不同的颜色来设计这个不同的类 这怎么可能 把所有的类都写在上面并不容易RowDataBo
  • Android webView 的 iframe 的 shouldOverrideUrlLoading

    我有一个由 Javascript 控制的本地网站 并将其加载到 WebView 中 该网站实际上是一个带有 iframe 的主页 其内容根据用户输入而变化 主页上有一个 下一步 按钮 它运行一些 javascript 函数并决定在 ifra
  • 两个数组的乘积之和(点积)

    首先 我知道我的标题可以更好地表述 但我的数学课已经结束了 我已经记不起正确的单词了 我需要做这样的事情 伪c int digits1 new int 10 0 1 2 3 4 5 6 7 8 9 int digits2 new int 1
  • Material Design lite 所需的复选框验证未显示错误消息

    我正在使用 Material Design Lite 来制作表单 我面临的问题是 当在复选框上设置所需的验证时 它似乎在渲染后立即隐藏错误消息 请注意 实际验证正在按预期进行 只是未显示错误消息 这是一个解决这个问题的代码笔 http co
  • Android Gradle:找不到符号变量

    我在使用 gradle 构建时遇到错误 如下所示 error cannot find symbol variable image name 我在用着ContextCompat getDrawable getActivity R drawab
  • 在Python中将字符串截断为特定字节数

    如何将字符串截断为不超过 50 个字节 a asdfzx awelkjawletjawetr dlgawklejtwgasdgsdfgd sdfasdfsdafa rewgargasregawergedrhsedhesrdhrthdrfjy
  • Selenium WebDriver 和下拉框

    如果我想选择下拉框的一个选项 有多种方法可以实现 我一直用 driver findElement By id selection sendKeys Germany 但这并不是每次都有效 有时会选择另一个选项 所以我用谷歌搜索了一下 发现这段
  • 如何使用 awk 将一组重复的行转置为列

    我有一个文本文件 其中包含 7 列数据 格式如下 18030 AAJ51 FTO rs9939609 C 30090620 10 A T 18030 AAJ51 CAT rs1001179 C 11468118 10 C C 18030 A
  • 有没有比“手表制造”更明智的替代方案?

    我遇到了这个有用的提示 如果您经常处理文件并且希望它们自动构建 则可以运行 手表品牌 每隔几秒钟它就会重新运行一次 一切都会构建完成 然而 它似乎一直在吞噬所有的输出 我认为它可能更聪明 也许显示输出流 但抑制 全部 不做任何事情 这样如果
  • Like子句和sql注入

    我对这种情况存有疑问 我在存储过程中有这样的查询 SELECT column1 column2 FROM table1 WHERE column1 like column1 我的问题是 这容易受到 SQL 注入攻击吗 我需要将其更改为这样的
  • 如何在PDF文档之前显示加载屏幕

    在我们的应用程序中 我们有动态生成的 PDF 文档的链接 链接看起来像这样主机 22 5 file 3136 pdf所以对于浏览器来说它就像一个静态的 pdf 文档 单击链接时 它会打开一个新窗口 该窗口仅接收 PDF 文档 无 HTML
  • 仅使用本机库的 C# 简单游戏

    我可以找到一组java 2D 游戏教程 http zetcode com tutorials javagamestutorial and 安卓游戏教程 http obviam net index php table of contents
  • 计算数组中向量之间的最大距离

    假设我们有一个包含 n 个向量的数组 我们想要计算这些向量之间的最大欧氏距离 最简单 天真的 的方法是迭代数组 并为每个向量计算其与所有后续向量的距离 然后找到最大值 然而 这个算法会增长 n 1 相对于数组的大小 对于这个问题还有其他更有
  • 继续阅读 JavaScript 中的链接

    我有一个像传记这样的字段 其中包含文本 我需要在第一页上显示该字段的一半 部分 文本 然后出现继续阅读链接 单击该链接后 剩余文本将显示在同一页面上 我需要在 HTML 中实现这一点 谁能帮我 请注意 这是快速原型设计 如果你使用jquer