PJBlog侧边栏整合tab(滑动)选项卡

博客侧边栏的东西有点多,于是想整合整合,去论坛看了一下,倒是有很多人发了些整合的帖子,于是也懒得自己动手去弄了,不过使用下来发现,论坛上发布的一些选项卡效果没有一个能恩我满意的,要不就是有点复杂(效果也不咋的),要么就是兼容性不行,只能在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>


第二类,随鼠标滑动切换 onmousedown。
<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 与 onmousedown 。
  可能有些朋友不是想整合 最新日志,留言,评论。换一下调用的代码就可以,很简单,这里我就不多引伸了。
整合了之后,请将原来的如 最新日志,留言,评论 模块隐藏起来就可以,避免重复。
  可能有些朋友的侧边栏比较的窄,用这个可能会出现侧边栏掉下去的情况,没有关系,很简单,调整下CSS就行,把上面的  width:73px; 调小一些就行了,当然了,这个选项卡用用到了一张图片,也是为了美观。请将这张图片

右击另存为本地,然后上传到根目录下的imags文件夹中。如果你修改了width:73px; 的宽度,图片长度也将要调整。
  这个选项卡只是提供一个思路,可以整合更多的花样出来。
  如果有什么问题,可以留言,我第一时间解决!

© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 抢沙发

请登录后发表评论