HTML DIV 左边链接,右边显示内容

 最近在自己胡乱学做系统界面,很多东西都得自己从网上来找,关于用DIV布局的问题弄了好久,,至今还没弄出个名堂,,下面是左边链接,右边显示内容的代码:

 

  
  
  
  
  1.  
  2. <html> 
  3. <head> 
  4. <title>DIV布局</title> 
  5. <style> 
  6. .main{width:1000px;}  
  7. .main_left{float:left; width:200px; background:pink;}  
  8. .main_right{float:right; width:800px; background:;}  
  9. #content { height:500px; background:#ffa;}  
  10. a{TEXT-DECORATION:none;color:#9F35FF}  
  11. a:visited {text-decoration:underline;color:#9F35FF}   
  12. A:hover {text-decoration:underline;color:black}  
  13. .GlowFilter {filter : Glow(Color="#3300ff",Strength="10")}  
  14. .GlowFilter {filter : Glow(Color="yellow",Strength="8")}  
  15. .noglow {}  
  16. </style> 
  17. </head> 
  18. <script type="text/javascript">   
  19. function theforever(a){  
  20.     document.getElementById('content').innerHTML='<iframe src=\'#\'" /span>+a.href+'"   
  21. width=100height=100%></iframe>';  
  22.     a.href="#";}  
  23. </script> 
  24. <body> 
  25. <div class="main"> 
  26.  <div class="main_left"> 
  27.   <ul> 
  28. <div ID="rollover1" STYLE="height:10; font:bold 10pt Arial; color:#0080ff; cursor:hand;"> 
  29. <a href="http://www.baidu.com" Onmouseover="rollover1.className='GlowFilter'"    
  30. Onmouseout="rollover1.className='noglow'"   
  31. onclick="theforever(this);"> 
  32. <li><b>链接1</b></li></a><br><br></div> 
  33.  
  34. <div ID="rollover2" STYLE="height:10; font:bold 10pt Arial; color:#0080ff; cursor:hand;" > 
  35. <a href="http://www.sina.com" Onmouseover="rollover2.className='GlowFilter'"    
  36. Onmouseout="rollover2.className='noglow'" onclick="theforever(this);"> 
  37. <li><b>链接2</b></li></a><br><br></div> 
  38.  
  39. <div ID="rollover3" STYLE="height:10; font:bold 10pt Arial; color:#0080ff; cursor:hand;" > 
  40. <a href="http://www.163.com" Onmouseover="rollover3.className='GlowFilter'"    
  41. Onmouseout="rollover3.className='noglow'" onclick="theforever(this);"> 
  42. <li><b>链接3</b></li></a><br><br></div> 
  43.  
  44. <div ID="rollover4" STYLE="height:10; font:bold 10pt Arial; color:#0080ff; cursor:hand;" > 
  45. <a href="http://www.51zx.com" Onmouseover="rollover4.className='GlowFilter'"    
  46. Onmouseout="rollover4.className='noglow'" onclick="theforever(this);"> 
  47. <li><b>链接4</b></li></a><br><br></div> 
  48.  
  49. <div ID="rollover5"  STYLE="height:10; font:bold 10pt Arial; color:#0080ff; cursor:hand;"> 
  50. <a href="http://www.hao123.com" Onmouseover="rollover5.className='GlowFilter'"   
  51.  Onmouseout="rollover5.className='noglow'" onclick="theforever(this);" > 
  52. <li><b>链接5</b></li></a><br><br></div> 
  53.  
  54. <div ID="rollover6"  STYLE="height:10; font:bold 10pt Arial; color:#0080ff;   
  55. cursor:hand;"> 
  56. <a href="#" Onmouseover="rollover6.className='GlowFilter'"    
  57. Onmouseout="rollover6.className='noglow'" > 
  58. <li><b>退出系统</b></li></a><br><br></div> 
  59. </ul> 
  60. </div>   
  61.  <div class="main_right" id="content"> 
  62.    <ul> 
  63.       <li id="link0" style="display:block">系统界面</li> 
  64.     </ul> 
  65.  </div> 
  66. </div> 
  67. </body> 
  68. </html> 



虽然能基本实现,但第二次点击链接时,好像失效一样,显示的是空白了,不再是对应的网页,找原因中,,还求高人指点

你可能感兴趣的:(div布局,左边链接,右边显示内容)