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. jq多了有点影响速度。。

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

    7F

怎么样?你也说一句吧!

gravatar

汗 色 悲 闭嘴 调皮 笑 惊 亲 雷 馋 晕 酷 奸 怒 狂 萌 吃 贪 囧 羞 哭