在鏈接上的網頁中顯示文字

有沒有一種簡單的方法可以在不改變網址或使用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