定位 iframe 并同时显示文本

Targeting an iframe and showing text at the same time?

本文关键字：显示 文本 iframe 定位      更新时间：2023-09-26

我正在尝试创建一个针对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>

这就是我使用 JQuery 的方式：

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

这是JSFiddle演示

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

相关文章：