我想要顯示來自不同鏈接的內容

我有兩個div。一個在左邊，另一個在右邊。我想要顯示來自不同鏈接的內容

左邊的那個會顯示鏈接，無論何時點擊，內容都會顯示在右邊的div上。

我一直在嘗試做iframe和javascript，但我似乎無法得到它的權利。我仍然是一個初學者，我一直在搜索整個互聯網嘆息。

有什麼想法？

感謝

來源

2011-02-24 Yasmin Khalaf

您從您的網站或其他域的外部網站獲取的內容是？ – stanwilsonjr 2011-02-24 20:16:29

爲了實現這一點，您有幾個選擇。

最簡單的方法是將所有內容用div分隔，並在右側div中添加一個id。隱藏除第一個鏈接外的所有內容左側的鏈接會將這些ID鏈接到相應的內容。點擊鏈接時隱藏全部，清除正確的div，並顯示被點擊的ID。

另一種選擇是AJAX這是不可訪問的第一選擇，因爲如果JavaScript關閉它將無法正常工作。對於第一個選擇，如果Javascript關閉，內容將僅顯示，點擊鏈接後將滾動到內容。

來源

2011-02-24 20:03:31 cp3

第一個選擇真的是我想要的。有關於我如何做到這一點的更多信息？這將是非常棒的。 - @ centr0 – 2011-02-24 20:51:04

我使用JQuery來滿足我所有的Javascript需求。我會結合使用的是：http://docs.jquery.com/Show，http://docs.jquery.com/Hide並將這些操作與每個http://api.jquery.com/click/綁定在一起鏈接。 – cp3 2011-02-24 21:08:47

可以使用DOM來實現類似的東西...在http://www.w3schools.com/jsref/default.asp看看它有一些很好的例子，...

來源

2011-02-24 19:57:49 mixkat

如果你想在另一個DIV來顯示信息，你應該使用AJAX。如果您想使用導航框架，請選擇this。

來源

2011-02-24 20:00:05 vissi

您可以通過使用jQuery和jQuery UI庫輕鬆做到這一點。 http://jqueryui.com/demos/tabs/#ajax jQueryUI選項卡可以加載遠程內容。

來源

2011-02-24 20:00:19

我也會試試這個...似乎很容易使用。 :)謝謝 – 2011-02-24 21:58:28

在您的鏈接的onClick，您可以更改iframe的src鏈接到鏈接的href，並應自動更改iframe的內容。

來源

2011-02-24 20:03:57 treaint

嘿茉莉，你可以做這樣的事情。請注意，該解決方案沒有JavaScript框架。但是你應該定義一下像jquery或prototype這樣的框架。假設您有：

<html><head>...</head><body> 
<ul> 
<li><a href="www.google.com" id="firstLink" >GOOGLE</a></li> 
<li><a href="www.twitter.com" >Twitter</a></li> 
<li><a href="www.tumblr.com" >Tumblr</a></li> 
</ul> 

<div><iframe name="TEST" src="about:blank" id="ts" ></IFRAME></div> 

PUT THE SCRIPT TAG CLOSE TO THE BOTTOM OF YOU PAGE FOR SAKE OF PAGESPEED 
BETTER PUT EVERYTHING IN AN EXTERNAL JS SCRIPT 

<script laguage='javascript'> 

addLoadListener(initEvents); 

function initEvents() 
{ 
    var mylink = document.getElementById("firstLink"); 

    mylink.onclick = changeFrame(mylink.href); 

    return true; 
} 


function changeFrame(url) 
     { 
      //OPEN URL IN IFRAME WITH ID = ts 
      document.getElementByID('ts').src=url; 
      return false; // IS NEEDED TO SKIP THE NORMAL BEHAVIOUR OF THE LINK 
     } 


// THIS FUNCTION IS NEEDED TO HAVE THE JS READY WHEN THE PAGE IS LOADED 
function addLoadListener(fn) 
{ 
    if (typeof window.addEventListener != 'undefined') 
    { 
    window.addEventListener('load', fn, false); 
    } 
    else if (typeof document.addEventListener != 'undefined') 
    { 
    document.addEventListener('load', fn, false); 
    } 
    else if (typeof window.attachEvent != 'undefined') 
    { 
    window.attachEvent('onload', fn); 
    } 
    else 
    { 
    var oldfn = window.onload; 
    if (typeof window.onload != 'function') 
    { 
     window.onload = fn; 
    } 
    else 
    { 
     window.onload = function() 
     { 
     oldfn(); 
     fn(); 
     }; 
    } 
    } 


    </script> 
</body></html>

來源

2011-02-24 20:18:31 Phaenotyp

我想要顯示來自不同鏈接的內容

回答

相關問題