左边导航切换时右边的内容会显示会出错。不知道那里错了,望指点!!先谢谢了~
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<style type="text/css">
body { margin: 10px; padding: 0px; }
#nav { width: 200px; float: left; display: block;background:;}
#main iframe {
float: left;
position:fixed;
width:800px;
height:500px;
padding:0;
margin:0;
}
</style>
<script type="text/javascript">
window.onload = function()
{
var anchor = document.getElementsByTagName('a');
var ifr = document.getElementById('ifr');
for (var i=0;i<anchor.length;i++ )
{
anchor[i].onclick = function()
{
ifr.src = this.href;
this.href = '#';
}
}
}
</script> <body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="http://www.baidu.com">Baidu</a></li>
<li><a href="http://www.google.com.hk">Google</a></li>
<li><a href="http://www.sina.com.cn">Sina</a></li>
</ul>
</div>
<div id="main">
<iframe id="ifr" frameborder="1px" src="http://www.baidu.com">
</div>
</div>
</body>
</html>
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<style type="text/css">
body { margin: 10px; padding: 0px; }
#nav { width: 200px; float: left; display: block;background:;}
#main iframe {
float: left;
position:fixed;
width:800px;
height:500px;
padding:0;
margin:0;
}
</style>
<script type="text/javascript">
window.onload = function()
{
var anchor = document.getElementsByTagName('a');
var ifr = document.getElementById('ifr');
for (var i=0;i<anchor.length;i++ )
{
anchor[i].onclick = function()
{
ifr.src = this.href;
this.href = '#';
}
}
}
</script> <body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="http://www.baidu.com">Baidu</a></li>
<li><a href="http://www.google.com.hk">Google</a></li>
<li><a href="http://www.sina.com.cn">Sina</a></li>
</ul>
</div>
<div id="main">
<iframe id="ifr" frameborder="1px" src="http://www.baidu.com">
</div>
</div>
</body>
</html>
你换别的网址看看
window.onload = function()
{
var anchor = document.getElementsByTagName('a');
var ifr = document.getElementById('ifr');
for (var i=0;i<anchor.length;i++ )
{
anchor[i].target = "main";
anchor[i].onclick = function()
{
ifr.src = this.href;
this.href = '#';
}
}
}<iframe id="ifr" name="main" frameborder="1px" src="http://www.baidu.com">
这样更好
{
ifr.src = this.href;
this.href = '#'; // 这儿不对
}
}你这样,下次再点击,就获取不到原来的url了anchor[i].onclick = function()
{
ifr.src = this.href;
return false; // 这样页面不跳转
}
}
调整内容见红色字体
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<style type="text/css">
body { margin: 10px; padding: 0px; }
#nav { width: 200px; float: left; display: block;background:;}
#main iframe {
float: left;
position:fixed;
width:800px;
height:500px;
padding:0;
margin:0;
}
</style>
<script type="text/javascript">
window.onload = function()
{
var anchor = document.getElementsByTagName('a');
var ifr = document.getElementById('ifr');
for (var i=0;i<anchor.length;i++ )
{
anchor[i].onclick = function()
{
ifr.src = this.getAttribute("shref");
this.href = '#';
}
}
}
</script> <body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a shref="http://www.baidu.com">Baidu</a></li>
<li><a shref="http://www.google.com.hk">Google</a></li>
<li><a shref="http://www.sina.com.cn">Sina</a></li> </ul>
</div>
<div id="main">
<iframe id="ifr" frameborder="1px" src="http://www.baidu.com">
</div>
</div>
</body>
</html>