我想要显示来自不同链接的内容

我有两个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

我想要显示来自不同链接的内容

回答

相关问题