jquery实现tab切换效果

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

分类:网络博客 标签:,,

上一篇:你希望邮箱有这样的功能吗

下一篇:阿根廷人去美国签证流程(一)

已经有12条评论!

Loading...
  1. 学习了

    沙发!
  2. 用过jQ实现的,后来又不用了

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

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

  3. 现在验证码OK了,感谢zww

    地板!
  4. JQ确实很强大!

    4F
  5. 学习中

    5F
  6. jq多了有点影响速度。。

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

    7F

怎么样?你也说一句吧!

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑