WordPress 简单代码实现Tab切换效果
tab切换效果已经得到广泛应用。tab切换可以节省很多的页面空间，您可以把几个屏的页面控制到一个屏内。此外，还能带来很炫的效果。您可以利用css和简单的js代码即可实现tab切换。对于Wordpress用户来说，应用起来更是方便，你可以将tab切换模块用在自己的侧边栏sidebar.php或者主页面index.php以及单篇日志页single.php等。宝宝健康成长详细讲解下利用简单代码实现Wordpress Tab切换效果。
一、首先在当前主题的header.php里加载jquery库。首先可以先检查下自己的主题是否有jquery.js这个文件，一般主题本身就带有，在head标签里会看到这样的语句：
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/lib/jquery-1.4.2.min.js"></script>
这就算是已经加载了，如果没有找到也不要紧，也不用放到自己的主机上，google上就有，只要添加如下的语句到head标签里就可以了：
<script type="text/javascript" src=http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js></script>
二、在想要添加tab切换模块的主题文件里添加html代码了，如我应用在侧边栏sidebar.php。我选用了较常用的“最新文章”、“最新评论”、“随机文章”三个栏目作为Tab切换。
<span class=”selected”>最新文章</span><span>最新评论</span><span>随机文章</span>
</div>
<div id=”tab-content”>
<ul><?php query_posts(‘showposts=10′); ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href=”<?php the_permalink() ?>“><?php the_title(); ?></a></li>
<?php endwhile;?> </ul>
<ul class=”hide”><?php $result = $wpdb->get_results(“SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10″);
foreach ($result as $post) {setup_postdata($post); $postid = $post->ID; $title = $post->post_title; $commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href=”<?php echo get_permalink($postid); ?>” title=”<?php echo $title ?>“>
<?php echo $title ?></a> (<?php echo $commentcount ?>)</li>
<?php } } ?></ul>
<ul class=”hide”><?php
$rand_posts = get_posts(‘numberposts=10&orderby=rand’);
foreach( $rand_posts as $post ) :
?>
<li><a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a></li>
<?php endforeach; ?></ul>
</div>
</div>
三、CSS美化，添加下面的代码到主题里style.css文件里：
#tab-title span{padding:5px 9px 5px 9px;border:0px;border-right:0px;margin-left:-1px;cursor:pointer;}
#tab-content .hide{display:none;}
#tab-content ul{padding:5px 5px;overflow:hidden;}
#tab-content ul li{padding-top:5px;overflow:hidden;}
css代码要和主题相适的，所以要用的话，简单的修改是必要的。至此已经完成一大半了，就差切换了，赶紧利用jquery来实现吧。
四、jQuery控制码。这个可以新建一个js文件，上传到服务器。或者直接添加代码到sidebar.php文件中（推荐）。
$(this).addClass(“selected”).siblings().removeClass();
$(“#tab-content > ul”).eq($(‘#tab-title span’).index(this)).show().siblings().hide();
});
});
陈述下控制代码的运作过程：鼠标移到一个标题（#tab-title span）时，该标题添加被选中（.selected）的效果，其他标题移除被选中的效果；同时，获取标题被选择的序号（.eq()），让内容中对应的子项（#tab-content ul）显示，其余子项隐藏。
本文核心代码来自于林木木。
相关阅读:
