郑永博客

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

除非注明，郑永博客文章均为原创，转载请以链接形式标明本文地址

本文地址：http://www.xptt.com/jquery-tab-to-switch-to-achieve-results.html