Trying to create a unique menu that interacts with an iframe and displays text in a separate div upon clicking.
Example:
• Menu item 1 clicked.
• "https://wikipedia.org" loads in the iframe.
• Address of the wikipedia page displayed in a different div.
Managed to display text as desired, but struggling to target the iframe simultaneously.
Considering using query for better functionality?
Any assistance would be greatly appreciated!
(A JavaScript function is used to turn the clicked link red).
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>