定位 iframe 并同时显示文本？答案

【问题标题】：Targeting an iframe and showing text at the same time?定位 iframe 并同时显示文本？
【发布时间】：2016-01-15 21:56:27
【问题描述】：

我正在尝试创建一个以 iframe 为目标的菜单，但单击后也会在单独的 div 中显示文本。

例如：
• 单击菜单项 1。
• “https://wikipedia.org”加载到 iframe 中。
• 维基百科页面的地址显示在单独的 div 中。

使用我在这里找到的一些代码，我已经能够制作菜单以显示我想要的文本，但我不能同时定位 iframe。

也许使用查询会更好？

任何帮助都会很棒！

（Javascript 函数将点击的链接变为红色）。

var Lst;

function changecolor(obj) {
    if (Lst) Lst.style.color = "#663399";
    obj.style.color = "red";
    Lst = obj;
}

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
.menu {
  font-size: 13px;
  width: 260px;
  height: 350px;
  left: 8px;
}
#tabs p {
  display: none;
  font-size: 13px;
}
#tabs p.tab1:target {
  display: block;
}
#tabs p.tab2:target {
  display: block;
}
#tabs p.tab3:target {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="tabs" class="menu">

    <a href="#tab1" class="nav-tab tab1" onclick="changecolor(this)">
	Menu item 1<br><br></a>

    <a href="#tab2" class="nav-tab nav-tab-active tab2" onclick="changecolor(this)">
	Menu item 2<br><br></a>

    <a href="#tab3" class="nav-tab nav-tab-active tab3" onclick="changecolor(this)">
	Menu item 3<br><br></a>

    <p id='tab1' class='tab1'>
      <a href="https://www.wikipedia.org">"https://www.wikipedia.org"</a>
    </p>

    <p id='tab2' class='tab2'>
      <a href="http://dictionary.reference.com">"http://dictionary.reference.com"</a>
    </p>

    <p id='tab3' class='tab3'>
      <a href="http://www.thesaurus.com">"http://www.thesaurus.com"</a>
    </p>

  </div>

</body>

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

这就是我使用 JQuery 的方式：

$("a").click(function(){
   $("iframe").attr("src", $($(this).attr("href")).find("a").attr("href"));
});

Here is the JSFiddle demo

（请注意，除了维基百科之外，您添加的其他两个链接不是自己加载的，它们也没有加载到 iframe 中。您可能想尝试使用其他链接:)）

【讨论】：

哇，这个效果很好。不知道为什么这两个网站没有在 JSFiddle 上加载，但是当我在它自己的浏览器中运行它时它们似乎会加载。