PJBlog侧边栏整合tab(滑动)选项卡(增加多个调用)

2009.6.19更新：

有些朋友提出出现“错误: ‘null’ 为空或不是对象”的问题，看了一下，原来有个地方出现了一个小小的错误，下面的代码已经修正了。原因是，本身切换了是4栏的，后来我改为了3栏，但是还是留的4栏的位置，所以第4栏就提示为空了，出现上面提到的错误。

博客侧边栏的东西有点多，于是想整合整合，去论坛看了一下，倒是有很多人发了些整合的帖子，于是也懒得自己动手去弄了，不过使用下来发现，论坛上发布的一些选项卡效果没有一个能让我满意的，要不就是有点复杂(效果也不咋的)，要么就是兼容性不行，只能在IE下有效果，这当然不是我要的效果了啊。

自己动手，丰衣足食。

于是自己动手研究了个，很简单，效果也很好，至今没有发现那个浏览器不兼容。

这种选项卡一般分为两类：一类是需要手动点击切换的；另一类是随鼠标自动滑动的。两种都写出来，根据自己的喜好来选择用哪个。

好，新建一个侧边栏模块，名字自己取，上代码！

第一类：手动点击切换 onclick。

<style type="text/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<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
<div id="Tab1">
<div class="Menubox">
<ul>
   <li id="one1" onclick="setTab('one',1,3)" >最新日志</li>
   <li id="one2" onclick="setTab('one',2,3)" class="Menubox_on" >最新评论</li>
   <li id="one3" onclick="setTab('one',3,3)" >最新留言</li>
</ul>
</div>
 <div class="Contentbox">  
   <div id="con_one_1" style="display:none"><$NewLog$></div>
   <div id="con_one_2" >$comment_code$</div>
   <div id="con_one_3" style="display:none"><$NewMsg$></div>
   </div>
</div>

第二类，随鼠标滑动切换 onmouseover。

<style type="text/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<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
<div id="Tab1">
<div class="Menubox">
<ul>
   <li id="one1" onmouseover="setTab('one',1,3)" >最新日志</li>
   <li id="one2" onmouseover="setTab('one',2,3)" class="Menubox_on" >最新评论</li>
   <li id="one3" onmouseover="setTab('one',3,3)" >最新留言</li>
</ul>
</div>
 <div class="Contentbox">  
   <div id="con_one_1" style="display:none"><$NewLog$></div>
   <div id="con_one_2" >$comment_code$</div>
   <div id="con_one_3" style="display:none"><$NewMsg$></div>
   </div>
</div>

这两种切换方式就是改了一个地方，onclick 与 onmouseover 。

可能有些朋友不是想整合 最新日志，留言，评论。换一下调用的代码就可以，很简单，这里我就不多引伸了。

整合了之后，请将原来的如 最新日志，留言，评论 模块隐藏起来就可以，避免重复。

可能有些朋友的侧边栏比较的窄，用这个可能会出现侧边栏掉下去的情况，没有关系，很简单，调整下CSS就行，把上面的 width:73px; 调小一些就行了，当然了，这个选项卡用用到了一张图片，也是为了美观。请将这张图片

右击另存为本地，然后上传到根目录下的imags文件夹中。如果你修改了width:73px; 的宽度，图片长度也将要调整。

这个选项卡只是提供一个思路，可以整合更多的花样出来。

2009.8.7更新：有朋友提示这个选项卡只能用一次，用2次就点不起来了，其实修改方法很简单。

<li id="two1" onmouseover="setTab('two',1,3)" >日志归档</li>
   <li id="two2" onmouseover="setTab('two',2,3)" class="Menubox_on" >博客目录</li>
   <li id="two3" onmouseover="setTab('two',3,3)" >博客日历</li>
</ul>
</div>
<div class="Contentbox">  
   <div id="con_two_1" style="display:none">$archive_code$</div>
   <div id="con_two_2" >$Category_code$</div>
   <div id="con_two_3" style="display:none">$calendar_code$</div>

看到上面的 two 的吧，只要修改这个就可以多次使用了，当然了，这个名字你自己定义，每调用一次保持一致。比如想用3次，就可以把上面红色的文字换成 three 等等~

如果有什么问题，可以留言，我第一时间解决！