2009.6.19更新：
有些朋友提出出现“错误: 'null' 为空或不是对象”的问题，看了一下，原来有个地方出现了一个小小的错误，下面的代码已经修正了。原因是，本身切换了是4栏的，后来我改为了3栏，但是还是留的4栏的位置，所以第4栏就提示为空了，出现上面提到的错误。
博客侧边栏的东西有点多，于是想整合整合，去论坛看了一下，倒是有很多人发了些整合的帖子，于是也懒得自己动手去弄了，不过使用下来发现，论坛上发布的一些选项卡效果没有一个能让我满意的，要不就是有点复杂(效果也不咋的)，要么就是兼容性不行，只能在IE下有效果，这当然不是我要的效果了啊。
自己动手，丰衣足食。
于是自己动手研究了个，很简单，效果也很好，至今没有发现那个浏览器不兼容。
这种选项卡一般分为两类：一类是需要手动点击切换的；另一类是随鼠标自动滑动的。两种都写出来，根据自己的喜好来选择用哪个。
好，新建一个侧边栏模块，名字自己取，上代码！
第一类：手动点击切换 onclick。
styletext/css body{ text-align:center;ul{ list-style:none;}/*选项卡*/#Tab1{margin:0px;padding:0px;margin:0 auto;}/*菜单class*/.Menubox { width:100%; background:url(images/tab_bg.gif) no-repeat; height:28px; line-height:28px;.Menubox ul{margin:0px;padding:0px;.Menubox li{ float:left; display:block; cursor:pointer; width:73px; text-align:center; font-weight:bold;.Menubox li.hover{ padding:0px; background:#fff; width:73px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; color:#5b792c; font-weight:bold; height:27px; line-height:27px;.Menubox_on { color:#5b792c; padding:0px; background:#fff; width:73px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; font-weight:bold; height:27px; line-height:27px;.Contentbox{ clear:both; margin-top:10px; border-top:none; text-align:left; /style script function setTab(name,cursel,n){ for(i=1;i i++){ vardocument.getElementById(name+i); vardocument.getElementById( con_ +name+ _ +i); menu.className=i==cursel? hover : con.style.display=i==cursel? block : none //-- /script divTab1 div 'one',1,3) 最新日志 /li lione2 quot;setTab('one',2,3) 'one',3,3) 最新留言 /li /ul /div div >第二类，随鼠标滑动切换 onmouseover。
styletext/css body{ text-align:center;ul{ list-style:none;}/*选项卡*/#Tab1{margin:0px;padding:0px;margin:0 auto;}/*菜单class*/.Menubox { width:100%; background:url(images/tab_bg.gif) no-repeat; height:28px; line-height:28px;.Menubox ul{argin:0px;padding:0px;.Menubox li{ float:left; display:block; cursor:pointer; width:73px; text-align:center; font-weight:bold;.Menubox li.hover{ padding:0px; background:#fff; width:73px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; color:#5b792c; font-weight:bold; height:27px; line-height:27px;.Menubox_on { color:#5b792c; padding:0px; background:#fff; width:73px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; font-weight:bold; height:27px; line-height:27px;.Contentbox{ clear:both; margin-top:10px; border-top:none; text-align:left; /style script function setTab(name,cursel,n){ for(i=1;i i++){ vardocument.getElementById(name+i); vardocument.getElementById( con_ +name+ _ +i); menu.className=i==cursel? hover : con.style.display=i==cursel? block : none //-- /script divTab1 div 'one',1,3) 最新日志 /li lione2 quot;setTab('one',2,3) 'one',3,3) 最新留言 /li /ul /div div >这两种切换方式就是改了一个地方，onclick 与 onmouseover 。
可能有些朋友不是想整合 最新日志，留言，评论。换一下调用的代码就可以，很简单，这里我就不多引伸了。
整合了之后，请将原来的如 最新日志，留言，评论 模块隐藏起来就可以，避免重复。
可能有些朋友的侧边栏比较的窄，用这个可能会出现侧边栏掉下去的情况，没有关系，很简单，调整下CSS就行，把上面的 width:73px; 调小一些就行了。
这个选项卡只是提供一个思路，可以整合更多的花样出来。
2009.8.7更新：有朋友提示这个选项卡只能用一次，用2次就点不起来了，其实修改方法很简单。
litwo1 quot;setTab('two',1,3) 日志归档 /li litwo2 quot;setTab('two',2,3) 'two',3,3) 博客日历 /li /ul /div div >看到上面的 two 的吧，只要修改这个就可以多次使用了，当然了，这个名字你自己定义，每调用一次保持一致。比如想用3次，就可以把上面红色的文字换成 three 等等~
如果有什么问题，可以留言，我第一时间解决！