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)显示,其余子项隐藏。
本文核心代码来自于林木木。
相关阅读: