Question

是否有一种简单的方法可以在不改变网址或使用iframe的情况下使用链接在网页中显示文字？也许有'onclick'功能？我很新的新代码，所以不知道从哪里开始..我附上了一个exaclty后的图片，相当简单。即时通讯已经使用iframe作为主界面，因此另一个将在默认菜单方面变得混乱。必须有一个简单的解决方案..任何帮助将非常感激。谢谢，亚伦

enter image description here

Answer 1

放入要隐藏的文本，直到点击隐藏容器内部，如下所示：

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

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

Updated jsFiddle

Answer 2

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

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

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

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

2 个答案: