在链接上显示网页内的文本

Question

有没有一种简单的方法可以使用链接显示网页中的文本，而无需更改网址或使用 iframe？也许有一个“onclick”功能？我对新代码很陌生，所以不知道从哪里开始。我附上了一张我之后的照片，相当简单。我已经使用 iframe 作为主界面，因此另一个 iframe 的默认菜单会变得混乱。必须有一个简单的修复..任何帮助将非常感激。 谢谢，亚伦

Answer 1

将要隐藏的文本放入隐藏容器内，直到单击为止，如下所示：

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

下一步是将 JavaScript 代码添加到页面，例如在 部分内：

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

最后有这样的代码：

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

实时测试用例。

编辑：如果要显示多个元素，可以使用 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 值相同的元素。

更新了小提琴。

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

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

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

更新了 jsFiddle。

Answer 2

为此，您有 2 个选择。第一种是预加载页面上的所有内容，然后仅在单击链接时设置可见属性。第二种是使用 AJAX 之类的方式加载它，然后以与上面相同的方式显示它。

要显示这些内容，请查看 JQuery： http://jquery.com/

第二种方法的一个很好的教程在这里： http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/