当前位置:爱推吧 » WordPress技巧 » 用Jquery实现标签切换

用Jquery实现标签切换

用Jquery实现标签切换,主要是有两个代码:一个是Jquery代码,另一个是php文件里面的代码,先把代码给贴出来。

Jquery代码:

<script type="text/javascript">
    $(function() {
        $(".ui-tabs-nav > li > a").mouseover(function(e) {
            if ( this== e.target) {
                var tabs = $(this).parent().parent().children("li");
                var panels = $(this).parent().parent().parent().children(".ui-tabs-panel");
                var index = $.inArray(this, $(this).parent().parent().find("a"));
                if (panels.eq(index)[0]) {
                    tabs.removeClass("ui-tabs-selected")
                        .eq(index).addClass("ui-tabs-selected");
                    panels.addClass("ui-tabs-hide")
                        .eq(index).removeClass("ui-tabs-hide");
                }
            }
        });
    });
</script>

下面是文件里面的代码:

    <ul>
        <li><a href="#">最新文章</a></li>
        <li><a href="#">文章排行</a></li>
  <li><a href="#">彩色标签云</a></li>
    </ul>
    <div>
  <?php $myposts = get_posts('numberposts=10&offset=0');foreach($myposts as $post) : ?>
  <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,33); ?></a></li>
  <?php endforeach; ?>
    </div>
    <div>
 <?php $pop = $wpdb->get_results("SELECT id, post_title, comment_count FROM {$wpdb->prefix}posts WHERE post_type='post' AND post_status='publish' AND post_password='' ORDER BY comment_count DESC LIMIT 10"); ?> 
 <?php foreach($pop as $post) : ?>
 <li><a href="<?php echo get_permalink($post->id); ?>" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,36); ?></a></li>
 <?php endforeach; ?> 
    </div>
 <div>
 <?php wp_tag_cloud('unit=px&smallest=11&largest=18&order=RAND&number=30');//参数含义:单位(px),最小(11),最大(18),排序(随机) ?>
 </div>

当然不要忘记加载jquery-1.7.1.min.js,要放在head里面喽。

鼠标放置上显示切换效果,效果请看我的博客:seo.55uz.net

发表评论

电子邮件地址不会被公开。 必填项已用*标注