当前位置: 首页 > 设计 > 正文
avatar

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

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

本文固定链接: http://www.weisay.com/blog/pjblog-tab-switch.html | 威言威语

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

  1. avatar
    15楼
    蛛蛛虎 Unknow Browser Unknow Os

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

    William 于 2009-11-01 11:24 PM 回复
    是的,全静态不支持~

    2009-11-01 22:58 [回复]
  2. 好了,原来是我修改common里面的文件引起来的。

    William 于 2009-10-20 11:59 AM 回复
    呵呵,那就好~

    2009-10-20 11:41 [回复]
  3. avatar
    13楼
    →☆[暗]☆← Unknow Browser Unknow Os

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

    2009-10-20 09:05 [回复]
  4. avatar
    12楼
    dean Unknow Browser Unknow Os

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

    William 于 2009-09-24 04:00 PM 回复
    看了一下你了网站,很正常啊。。。没有像你说的情况啊?

    2009-09-24 15:18 [回复]
  5. avatar
    11楼
    dawen Unknow Browser Unknow Os

    感谢 感谢

    William 于 2009-09-13 11:39 PM 回复
    不客气~

    2009-09-13 19:47 [回复]
  6. avatar
    10楼
    古冰 Unknow Browser Unknow Os

    我用了这个选项卡后,页面底部的#container #foot{}不起作用了,也就是页面的底部样式丢了,咋搞?
    隐藏选项卡能恢复
    [reply=William,2009-08-23 11:33 PM]刚刚看了你的博客,把你现在用的皮肤扒下来测试了下,没有问题。。。
    出现你博客上出现的问题,有可能是你侧边栏修改过,而那些代码不标准,与这段调用代码冲突导致的,你可以试着测试看看,把侧边栏的栏目隐藏起来看下,是不是还有这样的问题。。。最有问题的应该就是友情链接,你隐藏起来看看~[/reply]

    2009-08-23 16:55 [回复]
  7. avatar
    9楼
    erick Unknow Browser Unknow Os

    有个“大”问题哦!
    我用了这个选项卡后,页面底部的#container #foot{}不起作用了,也就是页面的底部样式丢了,咋搞?
    http://www.erick.cn
    [reply=William,2009-08-22 09:53 PM]你可以测试一下看看,到底是哪里出了问题,可以先将那2个选项卡隐藏,看看底部能否恢复正常。
    如果不能恢复,看看把底部的footer.asp代码换回系统自带的那个,看看有没有问题~[/reply]

    2009-08-22 21:24 [回复]
  8. avatar
    8楼
    kaisay.cn Unknow Browser Unknow Os

    如果使用两次,就会有冲突。
    具体看kaisay.cn
    [reply=William,2009-08-06 11:33 PM]嗯,我知道会有冲突的,我以为用2个的不多,所以也懒得改了。
    其实小小的修改下就可以用了~看我现在的侧边栏,是不是用两个没得问题啊,明天我会把修改方案写出来,==哈~[/reply]

    2009-08-06 16:47 [回复]
  9. avatar
    7楼
    kc.design Unknow Browser Unknow Os

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

    2009-06-20 09:30 [回复]
  10. avatar
    6楼
    kc.design Unknow Browser Unknow Os

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

    William 于 2009-06-19 11:23 PM 回复
    已经修正好了,你换换试试看!

    2009-06-19 16:51 [回复]
  11. avatar
    5楼
    yzsde Unknow Browser Unknow Os

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

    William 于 2009-06-19 11:23 PM 回复
    已经修正好了~

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

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

      2012-02-23 11:58 [回复]
  12. avatar
    4楼
    Darki Unknow Browser Unknow Os

    我的半动态 一直显示$NewLog$ 怎么解决了
    [reply=William,2009-06-19 09:20 AM]是半静态吧?
    我的这个就是在半静态下写的,肯定能用的。
    首先你要确定你复制的上面的代码,最好不要修改什么,特别是< $NewMsg$>左右两边的<> 不能少。评论的调用 $comment_code$ 上面就没有 <> 。
    如果出现你说的情况,应该是你没有安装最新日志的插件。系统自带的Recent Article。[/reply]

    2009-06-18 23:55 [回复]
  13. avatar
    地板
    无风 Unknow Browser Unknow Os

    好像全静态下无法切换

    William 于 2009-06-19 09:21 AM 回复
    全静态下只有首页可以切换,其他内容页不显示。

    2009-06-18 22:27 [回复]
  14. avatar
    板凳
    yzsde.cn Unknow Browser Unknow Os

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

    William 于 2009-06-19 09:27 AM 回复
    上面的代码在全静态下只有首页好用,其他内容页不显示。

    2009-06-18 14:47 [回复]
  15. avatar
    沙发
    Tony Unknow Browser Unknow Os

    不错
    其实就是在

  16. 中更改:onmouseover 或 onclick
    我的网站 也添加了这滑动选项应用
    有没有办法能让它自动轮换呢?

    William 于 2009-06-19 09:23 AM 回复
    你的站不是PJBlog搭建的啊!

  17. 2009-06-18 11:03 [回复]

发表评论

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

快捷键:Ctrl+Enter