Question

我有两个div。一个在左边，一个在右边。

左侧的那个将显示链接，每当点击时，内容将显示在右侧div。

我一直在尝试使用iframe和javascript，但我似乎无法做到正确。我还是初学者，我一直在网上搜索叹息。

有什么想法吗？！

由于

Answer 1

为了达到这个目的，你有几个选择。

最简单的方法是将所有内容分隔为div，并在右侧div中使用id。隐藏除第一个链接之外的所有链左侧的链接会将这些ID链接到相应的内容。单击链接时，全部隐藏，清除右侧div，并显示已单击的ID。

另一个选择是AJAX，它不像第一选择那样可访问，因为如果Javascript关闭它将无法工作。对于第一个选择，如果Javascript关闭，将只显示内容，点击链接后，它将滚动到内容。

Answer 2

你可以使用DOM来实现类似的东西......看看http://www.w3schools.com/jsref/default.asp它有一些很好的例子......

Answer 3

如果要在另一个DIV中显示信息，则应使用AJAX。如果您想使用导航框架，请检查this。

Answer 4

您可以使用jQuery和jQuery UI库轻松完成此操作。 http://jqueryui.com/demos/tabs/#ajax jQueryUI选项卡可以加载远程内容。

Answer 5

在你的链接的onClick中，你可以将iframe的src更改为链接的href，这应该会自动更改iframe的内容。

Answer 6

嘿茉莉，你可以这样做。请注意，此解决方案没有JavaScript框架。但你应该肯定地研究一个框架类似jquery或原型。假设你有：

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

我想在同一页面中显示来自不同链接的内容

6 个答案: