阿林`alinBlog

 div侧栏的显隐 支持ie6 firefox

阿林, 发表于:2009-01-21 22:03:42, 分类:asp 浏览( ) 评论( )  收藏这篇日志

我的cms还在进程中,今天解决一个后台侧边栏的现因问题,在网上搜的js代码和侧边栏的menu冲突,还要考虑浏览器兼容问题找了几个否没有解决,最后自己写了一个在ie6和firefox下基本上是可以了。

xml 代码
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>侧栏显隐控制</title> 
  6. <style type="text/css"> 
  7. <!-- 
  8. body { 
  9.     padding: 0; 
  10.     /*margin: 0;*/ 
  11. body, table, td, th, input, textarea, p, select, div, span { 
  12.     font-size: 12px; 
  13.  
  14. #sidebar { 
  15.     background: #A3B2CC; 
  16.     width: 200px; 
  17.     float: left; 
  18. #contenter { 
  19.     background: #D0D0D0; 
  20.     float: left; 
  21. --> 
  22. </style> 
  23. <script language="javascript" type="text/javascript">
  24. function showHideSidebar() {
  25.     var oCtrl = document.getElementById("ctrl");
  26.     var oSidebar = document.getElementById("sidebar");
  27.     var oContent = document.getElementById("contenter");
  28.     oCtrl.innerHTML = (oCtrl.innerHTML == "隐藏侧栏") ? "显示侧栏" : "隐藏侧栏";
  29.     oSidebar.style.display = (oSidebar.style.display == "none") ? "" : "none";
  30.     oSidebar.style.width = (oSidebar.style.width == "0px") ? "200px" : "0px";
  31.     oContent.style.width = parseInt(document.body.clientWidth) - parseInt(oSidebar.style.width) + "px";
  32. }
  33. </script>
  34. </head> 
  35.  
  36. <body>
  37. <a id="ctrl" href="javascript: void(0);" onclick="showHideSidebar();">隐藏侧栏</a> 
  38. <div id="box"> 
  39.    <div id="sidebar"> 
  40.       <p> </p>
  41.         <p> </p>
  42.         <p> </p>
  43.         <p> </p>
  44.         <p> </div> 
  45.    <div id="contenter"> 
  46.      <p> </p>
  47.         <p>12312333333333333333333333333333333333333333</p>
  48.         <p>12123</p> 
  49.    </div> 
  50. </div> 
  51. </body> 
  52. </html>

HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 

 js
正在读取日志的评论数据,请稍后……
正在加载日志评论签写框,请稍后……
成员登录通道
正在载入成员登录通道...
添加文章到网摘

添加到网摘:

BLOG 日历助手
正在载入日历助手...
BLOG 分类列表
BLOG 统计信息
正在载入统计信息...
BLOG 站内搜索

BLOG 日志归档
BLOG 最新评论
{$SideComment}
BLOG 最新留言
{$SideGB}
BLOG 友情链接