JaveWeb 公司项目（1）----- 使Div覆盖另一个Div完成切换效果

最近在做网页，用的是CSS+DIV的布局方法，搭建了一个简易的界面，大体上分为三个部分，如图所示：

左侧的为主功能导航栏，右侧是具体的功能实现，下方是固定的版权声明，单击左边不同的导航按钮，在div中放置不同的界面，最先的做法是每个功能写一个jsp文件，在主界面中通过.load（）方法加入jsp文件，后来觉得jsp文件太多想合并到一个界面上来，通过div覆盖的方式，显示不同的界面，这时候问题来了，我事先放置了一个div文件，效果如图所示：

表格放置在指定的位置，我想先把表格隐藏，用了display:none这个方法，想用JQuery

document.getElementById("no1").style.display="block";
$("#main").appendChild("#no1");
进行加载，结果效果出错，如图所示：

表格内无数据显示且表格位置下移

于是我换了一个属性，先将DIV的属性设置为visibility: hidden，然后在js中改变属性为visible，这样点击按钮，就会显示出编译的Div控件

我在网上查了一下，在css中，display和visibility都可以隐藏元素，区别在于visibility：hidden在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间，而display：none则表现得像把元素从页面里删除了，在页面上看不出该元素还存在着。

另外，display：block中的block元素会在页面中独占一行，这就是为什么我在改变隐藏属性的时候整体Div向下移动了一行的原因