求解下面的问题，HTML DIV布局_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:12:071277浏览
由于在做一个JSP的作业，简单做一个系统，大概的界面就是左边是功能链接列表，然后再右边显示。之前没弄过HTML，所以网上各处找有关DIV布局，左边链接，右边显示的问题，在网上看到下面的解决方法：
<html><head><title>DIV 跳转</title> <style> #container {margin:0 auto; width:100%;} #sidebar { float:left; width:200px; height:500px; background:#9c6;} * html #sidebar{margin-right:-3px;} #content { height:500px; background:#ffa;} </style></head><body> <div id="container"> <div id="sidebar"> <ul> <li> <a href="http://www.baidu.com" onclick="theforever(this);">百度</a></li> <li><a href="http://www.hao123.com" onclick="theforever(this);">好123</a></li> </ul> </div> <div id="content">为什么第二次点击链接的时候，显示空白啦？？</div> </div><script type="text/javascript"> function theforever(a){ document.getElementById('content').innerHTML='<iframe src="'+a.href+'" width=100% height=100%></iframe>'; a.href="#";}</script></body></html> 现在是可以基本达到这样的界面效果，，但是为什么第二次点击左边的按钮的时候，，右边变成空白了啊，问题出在哪了？
回复讨论(解决方案)
为什么呢，，望知道的耐心指导哈哦，，
把 a.href="#"; 去掉即可~~~
<html><head><title>DIV 跳转</title> <style> #container {margin:0 auto; width:100%;} #sidebar { float:left; width:200px; height:500px; background:#9c6;} * html #sidebar{margin-right:-3px;} #content { height:500px; background:#ffa;} </style></head><body> <div id="container"> <div id="sidebar"> <ul> <li> <a href="http://www.baidu.com" onclick="theforever(this);return false;">百度</a></li> <li><a href="http://www.hao123.com" onclick="theforever(this);return false;">好123</a></li> </ul> </div> <div id="content">为什么第二次点击链接的时候，显示空白啦？？</div> </div><script type="text/javascript"> function theforever(a){ document.getElementById('content').innerHTML='<iframe src="'+a.href+'" width=100% height=100%></iframe>'; }</script></body></html>
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> </head> <body> <a href="http://baidu.com" target="test">百度</a> <a href="http://hao123.com" target="test">hao123</a> <iframe src="http://qq.com" name="test" frameborder="0"></iframe> </body></html>
直接这样 就好。
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> </head> <body> <a href="http://baidu.com" target="test">百度</a> <a href="http://hao123.com" target="test">hao123</a> <iframe src="http://qq.com" name="test" frameborder="0"></iframe> </body></html>
直接这样就ok
a.href="#"
你点击后 改变了a 的href属性为 #
直接这样就ok
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> </head> <body> <a href="http://baidu.com" target="test">百度</a> <a href="http://hao123.com" target="test">hao123</a> <iframe src="http://qq.com" name="test" frameborder="0"></iframe> </body></html>
这样修改就ok啦，早上一直无法回复啊~~~
<html><head><title>DIV 跳转</title> <style> #container {margin:0 auto; width:100%;} #sidebar { float:left; width:200px; height:500px; background:#9c6;} * html #sidebar{margin-right:-3px;} #content { height:500px; background:#ffa;} </style></head><body> <div id="container"> <div id="sidebar"> <ul> <li> <a href="http://www.baidu.com" onclick="theforever(this);return false;">百度</a></li> <li><a href="http://www.hao123.com" onclick="theforever(this);return false;">好123</a></li> </ul> </div> <div id="content">为什么第二次点击链接的时候，显示空白啦？？</div> </div><script type="text/javascript"> function theforever(a){ document.getElementById('content').innerHTML='<iframe src="'+a.href+'" width=100% height=100%></iframe>'; }</script></body></html> 哎哟，，果然可以，，就这样吧，，结了
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn