0%

WordPress 添加jQuery效果Tab选项卡

实现步骤
1、新建tab.js文件,加入如下代码

1
2
3
4
5
6
7
   //侧边栏TAB效果   
jQuery(document).ready(function(){
jQuery('#tab-title span').click(function(){
jQuery(this).addClass("selected").siblings().removeClass();
jQuery("#tab-content > ul").slideUp('1500').eq(jQuery('#tab-title span').index(this)).slideDown('1500');
});
});

2、在主题的header.php文件的前加入

1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/tab.js"></script>

3、在siderbar.php 的合适位置加入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php if(is_home()||is_category()||is_page()) { ?>
<div class="widget">
<div id="tab-title">
<h2><span class="selected">热评文章</span><span>最新文章</span><span>随机文章</span></h2>
<div id="tab-content">
<ul><?php query_posts(array('posts_per_page' => 15,'caller_get_posts' =>1,'orderby' =>comment_count,));while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40,"...") ?></a></li>
<?php endwhile;wp_reset_query();?>
</ul>
<ul class="hide"><?php query_posts(array('posts_per_page' => 15,'caller_get_posts' =>1,'orderby' =>date,));while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40,"...") ?></a></li>
<?php endwhile;wp_reset_query();?>
</ul>
<ul class="hide"><?php query_posts(array('posts_per_page' => 15,'caller_get_posts' =>1,'orderby' =>rand,));while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40,"...") ?></a></li>
<?php endwhile;wp_reset_query();?>
</ul>
</div>
<div class="box-bottom">
<b class="lb"></b>
<b class="rb"></b>
</div>
</div>
</div>
<?php } ?>

注意:1)、第四行

标签需要更具主题style.css确定
2)、12行是将标题的前40个字符截取出来,可根据需要调整
4、加style.css文件尾部加上如下代码

1
2
3
4
5
6
7
#tab-title .selected{color:#f00;font-weight:bold}   
#tab-title span{
padding:0 22px 8px 0;
cursor:pointer;}
#tab-content .hide{display:none;}
#tab-content ul{overflow:hidden;list-style:none}
#tab-content ul li{line-height:23px;}