jquery实现tab切换效果

  • A+
所属分类:网络博客

到万戈的网站,看见侧边栏有个tab切换效果,这样可以在有限的空间里呈现更多的内容,其实这个效果在最初刚开始接触wordpress的时候,就有好几款主题利用这种效果来调整页面的内容显示,那个时候在添加自己的显示内容时就发现其实挺简单的,今天就研究一下,自己也学习一下,虽然网上N多方法,但是作者在这里再折腾一下,或许对身边没有接触过的朋友有所帮助。
达到这一效果有很多种方法,有的大型网站或许会考虑到载入速度,因为我介绍的这种方法在页面载入的时候就已经全部读取内容了,而大站里的效果是只有点击相应的tab按钮,才会实现加载内容,这样会加快页面的初始载入时间,不过代码比这个复杂得多,既然大家都是博客,我想也没必要搞成那种的。
好了,下面说说如何实现tab切换效果:

首先在header所要调用的代码:

<script type="text/javascript" src=http://www.xptt.com/jquery.js></script> \\就按照这个地址,你可以下载回去,放自己那里试试。
<style type="text/css">
* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#000000;}
.tabs { margin:0px 0 0 15px; width:260px; position:relative; overflow:hidden; height:1%; height:220px;}
.tabs h3 { z-index:2; font-size:12px; no-repeat; width:60px; height:25px; line-height:25px; text-align:center; float:left; margin-right:5px;}
h3.active { background-position:0 -25px; color:#808A87;}
#tab-01, #tab-02, #tab-03 { position:absolute; top:24px; left:0;}
#tab-02, #tab-03 { display:none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.tabs h3').mouseover(function() {
$('.tabs div').hide();
$(this).siblings('h3').removeClass('active').end()
.addClass('active').next('div').show();
});
});
</script>

最后在适当的地方插入一下代码:

<div class="tabs">
<!-- 默认第一个tab为激活状态 -->
<h3 class="active"><span>最新文章</span></h3>
<div id="tab-01">插入要显示的内容1</div>
<h3><span>最新评论</span></h3>
<div id="tab-02">插入要显示的内容</div>
<h3><span>最新留言</span></h3>
<div id="tab-03">插入要显示的内容</div>
</div>

效果如下:

图片丢失

具体效果可以查看本站的侧边,如果你发现本站的侧边已经没有了,说明我已经把他弄掉了,因为我不需要这样的tab效果,再则没那么多东西显示,折腾这个主要因为有个网友需要,所以就按照inove主题折腾一下。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:12   其中:访客  6   博主  6

    • 刘学政 0
      TT Explorer 4 Windows XP

      学习了

        • 郑 永 Admin
          Firefox 3 Windows XP

          喜欢折腾的话,CSS再调整下。

          @刘学政

        • zwwooooo 9
          Firefox 3 Windows 7

          用过jQ实现的,后来又不用了

          建议:加减法最好放在 comments.php 的判断用户cookie的if语句外,不然已经留言过的用户看不到有这个加减法,老是提交时警告才知道

            • 郑 永 Admin
              Firefox 3 Windows XP

              原来我也遇到这个问题,后来可能是因为我用了我自己的管理号进入,所以都没有发现这个问题,谢谢提醒啊,呵呵,我去改下 :)

              @zwwooooo

            • 郑 永 Admin
              Firefox 3 Windows XP

              现在验证码OK了,感谢zww

              • zhseo 0
                Internet Explorer 7 Windows XP

                JQ确实很强大!

                  • 郑 永 Admin
                    Firefox 3 Windows XP

                    最近在托人研究 我爱水煮鱼的 得分侧边栏随页面上下滚动的效果,也是利用到 JQ,呵呵

                    @zhseo

                  • 第一尚城 1
                    Firefox 3 Windows XP

                    学习中

                      • 郑 永 Admin
                        Firefox 3 Windows XP

                        真在学么?还是来做广告?

                        @第一尚城

                      • 超人 4
                        Firefox 3 Windows XP

                        jq多了有点影响速度。。

                          • 郑 永 Admin
                            Firefox 3 Windows XP

                            呵呵,加点没事,人家木木的网站是狂多啊,速度也还可以。

                            @超人

                          • 安利 0
                            Google Chrome 4 Windows 7

                            得,我还真想自己也弄个博客了,改天弄好了希望博主也能到我那拜访下!