jquery实现tab切换效果

网络博客 郑永 10684℃ 12评论 单栏模式

到万戈的网站,看见侧边栏有个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主题折腾一下。

转载请注明:郑永博客 » jquery实现tab切换效果

历史上的今天:

(12)个小伙伴在吐槽
Loading...
  1. 刘学政2010-04-02 12:50 TT Explorer 4 Windows XP 回复

    学习了

    沙发!
    • 郑 永2010-04-02 13:56 Firefox 3 Windows XP 回复

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

  2. zwwooooo2010-04-02 14:28 Firefox 3 Windows 7 回复

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

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

    板凳!
    • 郑 永2010-04-02 14:32 Firefox 3 Windows XP 回复

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

  3. 郑 永2010-04-02 14:49 Firefox 3 Windows XP 回复

    现在验证码OK了,感谢zww

    地板!
  4. zhseo2010-04-02 16:25 Internet Explorer 7 Windows XP 回复

    JQ确实很强大!

    4楼
    • 郑 永2010-04-02 17:33 Firefox 3 Windows XP 回复

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

  5. 第一尚城2010-04-03 02:30 Firefox 3 Windows XP 回复

    学习中

    5楼
    • 郑 永2010-04-04 16:53 Firefox 3 Windows XP 回复

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

  6. 超人2010-04-03 14:39 Firefox 3 Windows XP 回复

    jq多了有点影响速度。。

    6楼
    • 郑 永2010-04-04 16:52 Firefox 3 Windows XP 回复

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

  7. 安利2011-09-01 12:10 Google Chrome 4 Windows 7 回复

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

    7楼
gravatar
发表我的评论
取消评论


Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址