威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

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

博客侧边栏的东西有点多,于是想整合整合,于是自己动手研究了个PJBlog侧边栏整合tab(滑动)选项卡(增加多个调用),很简单,效果也很好,至今没有发现那个浏览器不兼容。
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; 调小一些就行了。

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

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

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

您可能还会对这些文章感兴趣!

PJBlog侧边栏整合tab(滑动)选项卡(增加多个调用):目前有 16 条评论

  1. 蛛蛛虎
    15楼
    蛛蛛虎:Safari 5.0.4 Windows 7

    是不是不支持全静态呀。
    我按你的方法修改后,只在首页能测试通过。
    如何修改才能在静态下也可以呀。

    William 于 2009-11-01 11:24 PM 回复

    是的,全静态不支持~

    2009-11-01 22:58 回复
  2. →☆[暗]☆←
    14楼
    →☆[暗]☆←:Internet Explorer 9.0 Windows 7

    好了,原来是我修改common里面的文件引起来的。

    William 于 2009-10-20 11:59 AM 回复

    呵呵,那就好~

    2009-10-20 11:41 回复
  3. →☆[暗]☆←
    13楼
    →☆[暗]☆←:Google Chrome 22.0.1229.96 Windows XP

    用了以后,用户面板一开始正常,过了几天,变乱码了。能帮着看看么?www.rething.cn

    2009-10-20 09:05 回复
  4. dean
    12楼
    dean:Opera 11.51 Windows 7

    您好:为什么在进入网站或者刷新网站时,选项卡上的信息自动没有显示,而要点击或者鼠标经过后才显示相关信息呢?

    William 于 2009-09-24 04:00 PM 回复

    看了一下你了网站,很正常啊。。。没有像你说的情况啊?

    2009-09-24 15:18 回复
  5. dawen
    11楼
    dawen:Google Chrome 18.0.1025.168 Windows 7

    感谢 感谢

    William 于 2009-09-13 11:39 PM 回复

    不客气~

    2009-09-13 19:47 回复
  6. 古冰
    10楼
    古冰:Google Chrome 24.0.1312.52 Windows 7

    我用了这个选项卡后,页面底部的#container #foot{}不起作用了,也就是页面的底部样式丢了,咋搞?
    隐藏选项卡能恢复

    William 于 2009-08-23 11:33 回复

    刚刚看了你的博客,把你现在用的皮肤扒下来测试了下,没有问题。。。
    出现你博客上出现的问题,有可能是你侧边栏修改过,而那些代码不标准,与这段调用代码冲突导致的,你可以试着测试看看,把侧边栏的栏目隐藏起来看下,是不是还有这样的问题。。。最有问题的应该就是友情链接,你隐藏起来看看~

    2009-08-23 16:55 回复
  7. erick
    9楼
    erick:搜狗高速浏览器 Windows XP

    有个“大”问题哦!
    我用了这个选项卡后,页面底部的#container #foot{}不起作用了,也就是页面的底部样式丢了,咋搞?
    http://www.erick.cn

    William 于 2009-08-22 09:53 回复

    你可以测试一下看看,到底是哪里出了问题,可以先将那2个选项卡隐藏,看看底部能否恢复正常。
    如果不能恢复,看看把底部的footer.asp代码换回系统自带的那个,看看有没有问题~

    2009-08-22 21:24 回复
  8. kaisay
    8楼
    kaisay:Google Chrome 12.0.742.100 Windows 7

    如果使用两次,就会有冲突。
    具体看kaisay.cn

    William 于 2009-08-06 11:33 回复

    嗯,我知道会有冲突的,我以为用2个的不多,所以也懒得改了。
    其实小小的修改下就可以用了~看我现在的侧边栏,是不是用两个没得问题啊,明天我会把修改方案写出来,==哈~

    2009-08-06 16:47 回复
  9. kc.design
    7楼
    kc.design:Google Chrome 17.0.932.0 Windows 7

    哈哈.歪打正着, 我本来就改的是四个NEW. 我哪问题主要是我把style="display:none"这个给整没了.哈哈.

    2009-06-20 09:30 回复
  10. kc.design
    6楼
    kc.design:Google Chrome 18.0.1025.151 Windows 7

    不是吧,,,我也没回付什么内容,咱会说屏蔽内容嘞?第三次了
    不管了,再来一次,
    我的问题是这样地. 用了上面的这个整合, 当打开页面时, 最新日志,最新留言,最新评论.调出来的东西全部在一堆..
    当小鼠标去移动哪里是,就好了, 然后也出现 错误: 'null' 为空或不是对象.
    我的BLOG,www.kc520.cn有空过来看看,问题出在哪哈.帮帮忙.研究研究.

    William 于 2009-06-19 11:23 PM 回复

    已经修正好了,你换换试试看!

    2009-06-19 16:51 回复
  11. yzsde
    5楼
    yzsde:Google Chrome 30.0.1599.69 Windows 7

    行: 328
    字符: 3
    错误: 'null' 为空或不是对象
    代码: 0
    用了这个后好像出这个问题,你的页面也一样,在腾讯TT浏览器下 IE8下无此错误

    William 于 2009-06-19 11:23 PM 回复

    已经修正好了~

    2009-06-19 14:10 回复
    • 在IE下'null' 为空或不是对象
      在IE下'null' 为空或不是对象:360安全浏览器 Windows XP

      @yzsde我还没有网址 为什么我还有这个问题呢

      2012-02-23 11:58 回复
  12. Darki
    4楼
    Darki:Internet Explorer 6.0 Windows XP

    我的半动态 一直显示$NewLog$ 怎么解决了

    William 于 2009-06-19 09:20 回复

    是半静态吧?
    我的这个就是在半静态下写的,肯定能用的。
    首先你要确定你复制的上面的代码,最好不要修改什么,特别是<$NewMsg$>左右两边的< > 不能少。评论的调用 $comment_code$ 上面就没有 < > 。
    如果出现你说的情况,应该是你没有安装最新日志的插件。系统自带的Recent Article。

    2009-06-18 23:55 回复
  13. 无风
    地板
    无风:Google Chrome 14.0.835.2 Windows 7

    好像全静态下无法切换

    William 于 2009-06-19 09:21 AM 回复

    全静态下只有首页可以切换,其他内容页不显示。

    2009-06-18 22:27 回复
  14. yzsde
    板凳
    yzsde:Firefox 3.6.13 Windows 7

    这也是个好东西哦,就是不知道在全静态模式下用什么代码调用最新日志,$NewLog$这个不管用

    William 于 2009-06-19 09:27 AM 回复

    上面的代码在全静态下只有首页好用,其他内容页不显示。

    2009-06-18 14:47 回复
  15. Tony
    沙发
    Tony:Google Chrome 16.0.912.77 Windows XP

    不错
    其实就是在 li 中更改:onmouseover 或 onclick
    我的网站 也添加了这滑动选项应用
    有没有办法能让它自动轮换呢?

    William 于 2009-06-19 09:23 AM 回复

    你的站不是PJBlog搭建的啊!

    2009-06-18 11:03 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry