我正在尝试创建一个以 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"));
});
(请注意，除了维基百科之外，您添加的另外两个链接不会自行加载，它们也不会加载到 iframe 中。您可能想尝试使用其他链接:))
关于javascript - 定位 iframe 并同时显示文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34784758/