用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
One comment