左侧导航栏可显示与隐藏用js该如何实现？

2012-09-14

左侧导航栏可显示与隐藏用js该怎么实现？？？当左边导航栏隐藏时，右边的工作区铺满浏览器窗口，显示时导航栏di

左侧导航栏可显示与隐藏用js该怎么实现？？？
当左边导航栏隐藏时，右边的工作区铺满浏览器窗口，显示时导航栏div（本人用div+css布局，不用框架）不会把右侧工作区的内容遮挡掉，也就是说右侧工作区的宽度会随着左侧导航栏显示与隐藏而发生改变。希望有人帮忙解决，万分感激！！！

[解决办法]
如果没有控制右侧工作区的div宽度，直接把左侧那个div隐藏掉就可以了啊，
[解决办法]
给你写了是测试例子，楼主再根据自己的需求改改，主要就是用过css里面的列宽度自适应来实现的，对于右边工作区，只给它设置高度，不设置宽度，左边的导航区设置高度与宽度，同时设置其左浮动，就ok了

HTML code

<!DOCTYPE html><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>测试</title>  <script type="text/javascript"src="http://code.jquery.com/jquery-1.8.1.min.js"></script>  <style type="text/css">    #all {      width: 400px;      height: 400px;      background: red;      margin: auto;    }    #left {      width: 10%;      height: 100%;      float: left;      background: #8a2be2;    }    #right {      background: #e6e6e6;      height: 100%;    }  </style></head><body><div id="all">  <div id="left"></div>  <div id="right"></div></div><button id="btn">按钮</button><button id="btn2">按钮2</button></body><script type="text/javascript">  $("#btn").click(function() {    $("#left").css({width : 0});  });  $("#btn2").click(function() {    $("#left").css({width : "10%"});  });</script></html>
[解决办法]
探讨
给你写了是测试例子，楼主再根据自己的需求改改，主要就是用过css里面的列宽度自适应来实现的，对于右边工作区，只给它设置高度，不设置宽度，左边的导航区设置高度与宽度，同时设置其左浮动，就ok了

HTML code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; c……

[解决办法]
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {  
width:960px;
margin:0 auto;
}
.left { float:left; }
.right { float:right; }
#lefter {  
width:340px;
height:100px;
border:1px solid #666;
}
#btn {  
width:10px;
height:50px;
border:1px solid #666;
background-color:#666;
padding:25px 0;
cursor:pointer;
}
#righter {  
width:600px;
height:100px;
border:1px solid #666;
}
</style>
<script type="text/javascript">
window.onload = function() {
(function() {
document.getElementById("btn").onclick = function() {
var lefts = document.getElementById("lefter");
var rights = document.getElementById("righter");
if (lefts.style.display == "block") {
lefts.style.display = "none";
rights.style.width = 942 + "px";
this.innerHTML = ">";
} else {
lefts.style.display = "block";
rights.style.width = 600 + "px";
this.innerHTML = "<";
}
}
})();
}
</script>
</head>

<body>
<div id="container">
 <div id="lefter" class="left"></div>
 <div id="btn" class="left"><</div> 
 
 <div id="righter" class="right"></div>
</div>
</body>
</html>

[解决办法]
左边一个宽,右边一个宽,完了.
[解决办法]
js修复，后来发现刚打开必须连点两下才可实现上述效果，修复方案可以给#lefter加display:block也可以修复js
<script type="text/javascript">
window.onload = function() {
(function() {
document.getElementById("btn").onclick = function() {
var lefts = document.getElementById("lefter");
var rights = document.getElementById("righter");
if (lefts.style.display == "none") {
lefts.style.display = "block";
rights.style.width = 600 + "px";
this.innerHTML = ">";
} else {
lefts.style.display = "none";
rights.style.width = 942 + "px";
this.innerHTML = "<";
}
}
})();
}
</script>

热点排行

JavaScript

左侧导航栏可显示与隐藏用js该如何实现？