宝宝健康成长网首页刘易桉宝宝健康成长 林林微博 育儿护理知识 宝宝网址导航
当前位置: 首页 >> 宝宝建站 >> WordPress 简单代码实现Tab切换效果

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切换。

<div id=”tab”>            <div id=”tab-title”>

              <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{border:0px;margin-bottom:1.5em;overflow:hidden;}#tab-title .selected{color:#356aa0;border-bottom:0px;}

#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文件中(推荐)。

jQuery(document).ready(function($){$(‘#tab-title span’).mouseover(function(){

    $(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)显示,其余子项隐藏。

本文核心代码来自于林木木

敬请留言当前共有 1 条评论

  1. 同盟源 说道:

    用不了,代码有错误

发表评论

^留言没头像?教你设置头像!
我的应用 [email protected] 宝宝问答>  0-1岁  1-3岁  3-6岁 手气不错