2012-02-12 48 views
1

有沒有一種簡單的方法可以在不改變網址或使用iframe的情況下使用鏈接顯示網頁中的文字?也許用'onclick'函數?即時通訊相當新的新代碼,所以不知道從哪裏開始。我附帶了一個什麼exaclty即時通訊後,相當簡單的圖片。即時通訊已經使用iframe作爲主界面,所以另一個會在默認菜單方面變得混亂。必須有一個簡單的解決方案..任何幫助將非常感激。 感謝,亞倫

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

enter image description here

回答

2

把你要隱藏,直到點擊裏面隱藏容器中的文字,像這樣:

<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

+0

似乎不適用於safari? – 2012-02-12 14:38:32

+0

沒有Safari,但很難相信這樣的基本代碼不起作用。你有JS錯誤嗎?你可以用其他瀏覽器測試嗎? – 2012-02-12 14:39:36

+0

是工作在Firefox精細,怪異 – 2012-02-12 14:40:24

0

你有兩個選擇這個。首先是預加載頁面上的所有內容,然後單擊鏈接時只設置可見屬性。第二個是使用AJAX之類的東西加載它,然後以與上面相同的方式顯示它。

爲了展示這些東西看看JQuery的:http://jquery.com/

一個很好的教程第二種方法是在這裏:http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

+0

從字面上得到了幾個教程。 jquery很棒。乾杯! – 2012-02-12 21:16:16