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 等等~
如果有什么问题,可以留言,我第一时间解决!
本文固定链接: https://www.weisay.com/blog/pjblog-tab-switch.html | 威言威语
是不是不支持全静态呀。
我按你的方法修改后,只在首页能测试通过。
如何修改才能在静态下也可以呀。
好了,原来是我修改common里面的文件引起来的。
用了以后,用户面板一开始正常,过了几天,变乱码了。能帮着看看么?www.rething.cn
您好:为什么在进入网站或者刷新网站时,选项卡上的信息自动没有显示,而要点击或者鼠标经过后才显示相关信息呢?
感谢
感谢
我用了这个选项卡后,页面底部的#container #foot{}不起作用了,也就是页面的底部样式丢了,咋搞?
隐藏选项卡能恢复
[reply=William,2009-08-23 11:33 PM]刚刚看了你的博客,把你现在用的皮肤扒下来测试了下,没有问题。。。
出现你博客上出现的问题,有可能是你侧边栏修改过,而那些代码不标准,与这段调用代码冲突导致的,你可以试着测试看看,把侧边栏的栏目隐藏起来看下,是不是还有这样的问题。。。最有问题的应该就是友情链接,你隐藏起来看看~[/reply]
有个“大”问题哦!
我用了这个选项卡后,页面底部的#container #foot{}不起作用了,也就是页面的底部样式丢了,咋搞?
http://www.erick.cn
[reply=William,2009-08-22 09:53 PM]你可以测试一下看看,到底是哪里出了问题,可以先将那2个选项卡隐藏,看看底部能否恢复正常。
如果不能恢复,看看把底部的footer.asp代码换回系统自带的那个,看看有没有问题~[/reply]
如果使用两次,就会有冲突。
具体看kaisay.cn
[reply=William,2009-08-06 11:33 PM]嗯,我知道会有冲突的,我以为用2个的不多,所以也懒得改了。
其实小小的修改下就可以用了~看我现在的侧边栏,是不是用两个没得问题啊,明天我会把修改方案写出来,==哈~[/reply]
哈哈.歪打正着, 我本来就改的是四个NEW. 我哪问题主要是我把style="display:none"这个给整没了.哈哈.
不是吧,,,我也没回付什么内容,咱会说屏蔽内容嘞?第三次了
不管了,再来一次,
我的问题是这样地. 用了上面的这个整合, 当打开页面时, 最新日志,最新留言,最新评论.调出来的东西全部在一堆..
当小鼠标去移动哪里是,就好了, 然后也出现 错误: 'null' 为空或不是对象.
我的BLOG,www.kc520.cn有空过来看看,问题出在哪哈.帮帮忙.研究研究.
行: 328
字符: 3
错误: 'null' 为空或不是对象
代码: 0
用了这个后好像出这个问题,你的页面也一样,在腾讯TT浏览器下 IE8下无此错误
我还没有网址 为什么我还有这个问题呢
我的半动态 一直显示$NewLog$ 怎么解决了
[reply=William,2009-06-19 09:20 AM]是半静态吧?
我的这个就是在半静态下写的,肯定能用的。
首先你要确定你复制的上面的代码,最好不要修改什么,特别是<$NewMsg$>左右两边的< > 不能少。评论的调用 $comment_code$ 上面就没有 < > 。
如果出现你说的情况,应该是你没有安装最新日志的插件。系统自带的Recent Article。[/reply]
好像全静态下无法切换
这也是个好东西哦,就是不知道在全静态模式下用什么代码调用最新日志,$NewLog$这个不管用
不错
其实就是在
我的网站 也添加了这滑动选项应用
有没有办法能让它自动轮换呢?