DIV如何实现类似框架跳转 点击左边文本链接，然后在右边DIV块里面显示

DIV如何实现类似框架跳转 点击左边文本链接，然后在右边DIV块里面显示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV 跳转</title> <style>
body { font-family:Verdana; font-size:14px; margin:0;}

#container {margin:0 auto; width:100%;}
#sidebar { float:left; width:200px; height:500px; background:#9c6;}
* html #sidebar{margin-right:-3px;}/*使用此方法解决ie 3像素bug可通过验证*/
#content { height:500px; background:#ffa;}
</style>
</head><body>
<div id="container">
  <div id="sidebar">
   <ul>
   <li>
   <a href="http://www.baidu.com">1</a>
   </li>
   <li>
   <a href="http://www.google.hk">2</a>
   </li>
   </ul></div>
  <div id="content">谁能帮我实现点击<font color="red" size="30px">&nbsp&nbsp&nbsp&nbsp1&nbsp&nbsp&nbsp&nbsp</font>跳转到百度页面，不过不是重新打开个窗口，而是显示在我这个块里面，谢谢啊？这个问题搞了我好久</div>
</div>
</body>
</html>

解决方案 »

  1.   

    没见过这种实现方法。我知道用ASP.NET可以轻松实现。Javascript也许可以，期待高手出现。
      

  2.   

    <title>DIV 跳转--write by [email protected]</title>
        <style>
                body { font-family:Verdana; font-size:14px; margin:0;}
                #container {margin:0 auto; width:100%;}
                #sidebar { float:left; width:200px; height:500px; background:#9c6;}
                * html #sidebar{margin-right:-3px;}/*使用此方法解决ie 3像素bug可通过验证*/
                #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);">1</a>
              </li>
              <li>
                  <a href="http://www.google.hk" onclick="theforever(this);">2</a>
              </li>
          </ul></div>
      <div id="content">谁能帮我实现点击<font color="red" size="30px">&nbsp&nbsp&nbsp&nbsp1&nbsp&nbsp&nbsp&nbsp</font>跳转到百度页面，不过不是重新打开个窗口，而是显示在我这个块里面，谢谢啊？这个问题搞了我好久</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>
      

  3.   

    本来楼主你那样问，我上面就已经回答完了。
    但为了摆平下面的麻烦，因为我白天不能上来，就再发一个，打消你接下来另外要问的问题。
    <title>DIV 跳转--write by [email protected]</title>
        <style>
                body { font-family:Verdana; font-size:14px; margin:0;}
                #container {margin:0 auto; width:100%;}
                #sidebar { float:left; width:200px; height:500px; background:#9c6;}
                * html #sidebar{margin-right:-3px;}/*使用此方法解决ie 3像素bug可通过验证*/
                #content { height:500px; background:#ffa;}
        </style>
    </head>
    <body>
    <div id="container">
      <div id="sidebar">
          <ul>
              <li>
                  <a href="#" url="http://www.baidu.com" onclick="theforever(this);">1</a>
              </li>
              <li>
                  <a href="#" url="http://www.google.hk" onclick="theforever(this);">2</a>
              </li>
          </ul></div>
      <div id="content">谁能帮我实现点击<font color="red" size="30px">&nbsp&nbsp&nbsp&nbsp1&nbsp&nbsp&nbsp&nbsp</font>跳转到百度页面，不过不是重新打开个窗口，而是显示在我这个块里面，谢谢啊？这个问题搞了我好久</div>
    </div>
    <script type="text/javascript">
    function theforever(a){
    document.getElementById('content').innerHTML='<iframe src="'+a.url+'" width=100% height=100%></iframe>';
    }
    </script>