gpt4 book ai didi

html - 在链接的网页中显示文本

转载 作者:行者123 更新时间:2023-11-28 00:20:34 26 4
gpt4 key购买 nike

有没有一种简单的方法可以在不更改网址或使用 iframe 的情况下使用链接显示网页中的文本?也许有一个'onclick'功能?我对新代码还很陌生,所以不确定从哪里开始。我附上了一张图片,说明我在追求什么,相当简单。我已经在使用 iframe 作为主界面,因此另一个界面在默认菜单方面会变得困惑。必须有一个简单的修复方法。任何帮助将不胜感激。谢谢,亚伦

enter image description here

最佳答案

将要隐藏的文本放入隐藏容器中,直到单击,如下所示:

<div id="HiddenTextContainer" style="display: none;">
Hello, I will become visible when you click something else
</div>

下一步是将该 JavaScript 代码添加到页面中,例如在 <head> 中部分:

function ShowHiddenText() {
document.getElementById("HiddenTextContainer").style.display = "block";
}

最后有这样的代码:

<span onclick="ShowHiddenText();">click me to show hidden text</span>

Live test case .

编辑:如果要显示多个元素,可以使用 rel属性:

<span rel="HiddenTextContainer2">click me to show second hidden text</span><br />

然后使用纯 JavaScript 遍历具有该属性的所有元素并分配它们的 onclick以编程方式:

window.onload = function() {
var elements = document.getElementsByTagName("span");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var id = element.getAttribute("rel") || "";
if (id.length > 0) {
element.onclick = function() {
var oToShow = document.getElementById(this.getAttribute("rel"));
if (oToShow)
oToShow.style.display = "block";
};
}
}
};

点击时,ID 与 rel 相同的元素将显示值。

Updated fiddle .

编辑:要在一个容器中显示它,首先要有这样的容器:

<div id="HiddenTextContainer"></div>

不需要隐藏它,因为它最初是空的,然后将代码更改为:

window.onload = function() {
var elements = document.getElementsByTagName("span");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var id = element.getAttribute("rel") || "";
if (id.length > 0) {
element.onclick = function() {
var oToShow = document.getElementById(this.getAttribute("rel"));
if (oToShow)
document.getElementById("HiddenTextContainer").innerHTML = oToShow.innerHTML;
};
}
}
};

不是显示相关容器,而是将其内容复制到“主”容器。

Updated jsFiddle .

关于html - 在链接的网页中显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9249027/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com