次の問題を解決します。HTML DIV レイアウト_html/css

次の問題を解決します。HTML DIV レイアウト_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:12:07

オリジナル

1266 人が閲覧しました

JSPの仕事をしているので、単純にシステムを作っているだけですが、おおよそのインターフェースは左側に関数リンク一覧があり、右側に表示されます。私はこれまで HTML をやったことがなかったので、DIV レイアウト、左側のリンク、右側の表示の問題をインターネット上で検索しました。インターネット上で次の解決策を見つけました。このようなインターフェイス効果が得られますが、最初に左側のボタンをクリックしたときに右側が空白になるのはなぜですか?

ディスカッションに返信 (解決策)

ご存知の場合は辛抱強く指導していただければ幸いです、

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);">百度</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>

ログイン後にコピー

<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>

ログイン後にコピー

このままで 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>

ログイン後にコピー

This修正は大丈夫です、朝から返信できませんでした~~

<!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>

ログイン後にコピー

ああ、確かにうまくいきました、それで終わりです