继续阅读 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 中的链接 的相关文章

  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • 为什么 setTimeout 在 Chrome 中触发两次,而在 IE 或 Firefox 中则不然?

    有人能告诉我为什么 javascript 函数 生成新号码 在 Chrome 中触发两次 但在 IE 或 Firefox 中则不会 使用 Chrome 20 0 1132 57 IE9 和 Firefox 13
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对
  • 禁用允许文本选择的

    残疾人可以吗

随机推荐

  • 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