我想制作一个有两个iframe的内容页面。一个iframe是带有按钮或链接的浮动侧边框,而另一个iframe实际上包含内容。我希望用户能够单击侧面菜单上的链接,例如“图像”,然后让该链接更改另一个iframe的内容。我还想要整个单元格,当鼠标悬停在菜单上时,菜单(图像,主页,读数)的每个标签都会改变颜色。
我尝试了很多东西,但这里是代码的基础知识:
<html>
<head>
<title>Main Content Page</title>
</head>
<body background="background.jpg">
<table>
<th>
<iframe src="sidebar.html" frameborder="no" border="0" scrolling="no" height="750" width="450"></iframe>
<th>
<iframe id ="content" src="" frameborder="no" border="0" scrolling="no" width="600" height="800"></iframe>
</table>
</body>
</html>
然后内容iframe的页面无关紧要。侧边栏的代码是:
<html>
<head>
<title>Main</title>
<base target="content">
<style type="text/css">
body{bgcolor: black;}
a{color: white}
a:link, a:visited{background-color: black}
<!--a:hover{background-color: gray}-->
<!--td:hover{background-color: gray}-->
buttons:hover{background-color: gray}
td, th{border:1px solid black; background-color:black;}
table{border:1px solid gray;}
td {font-family: Kunstler Script; color: white; font-size: 72; padding:15px;}
</style>
</head>
<body>
<table align="center">
<tr><div class="buttons"><div><td onclick="target.content.home.href='html'">Home</div>
<tr><div><td onclick="target.content.href='images.html'">Images</div>
<tr><div><td onclick="target.content.href='readings.html'">Readings</div></div>
</table>
</div>
</body>
</html>
现在链接不起作用,但按钮确实改变了颜色
答案 0 :(得分:4)
为您的内容iframe
添加name
属性
<iframe name="content" src="" frameborder="no" border="0" scrolling="no" width="600" height="800"></iframe>
将您的onclick
活动更改为
parent.window.frames['content'].location = 'url'
对于一个工作示例,创建3个页面。
main.html 包含
<iframe src="./1.html"></iframe>
<iframe name="content"></iframe>
1.html 包含
<a href="#" onclick="parent.window.frames['content'].location = './2.html'">load</a>
2.html 包含
iframe 2 loaded
加载main.html后,您会看到第一个iframe加载1.html带有加载链接,点击第一个iframe中的加载链接,然后将2.html加载到其他内容iframe中。
答案 1 :(得分:0)
为您的第二个iframe提供名称值:
<iframe name="iframe2" src="content.html"></iframe>
添加&#34;目标&#34;属性为第一个iframe的链接代码,目标是第二个iframe的ID:
<a href="something.html" target="iframe2">Link Here!</a>
我自己是初学者,希望能正确理解你的问题:)