威言威语

博客侧边栏的东西有点多，于是想整合整合，于是自己动手研究了个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>

[color=Red][size=12]第二类，随鼠标滑动切换 onmouseover。[/size][/color]

<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" 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 等等~

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