日星网
搜索

记录日常点点滴滴，欢迎来到我的小站。

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;}