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

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

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

enter image description here

来源

2012-02-12 aaron_m12345

把你要隐藏，直到点击里面隐藏容器中的文字，像这样：

<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。

来源

2012-02-12 13:12:40

似乎不适用于safari？ – 2012-02-12 14:38:32

没有Safari，但很难相信这样的基本代码不起作用。你有JS错误吗？你可以用其他浏览器测试吗？ – 2012-02-12 14:39:36

是工作在Firefox精细，怪异 – 2012-02-12 14:40:24