<div id="tab-box" class="widget">
<div class="widget-title tab_title">
<p style="left: 0;"></p>
<div class="tab_title_main"> <span class="current">生活</span><span class="">工作</span>
<div class="clear"></div>
</div>
</div>
<ul class="list_term" style="display: block;">
<?php
$work_args = array(
'post_type' => 'post',
'category_name' => 'life',
'posts_per_page' => 5
);
$post_work = new WP_Query( $work_args );
if ( $post_work->have_posts() ): while ( $post_work->have_posts() ): $post_work->the_post();
?>
<li> <a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
<?php the_title();?>
</a> </li>
<?php
endwhile;
else :
echo '<p>Not Found.</p>';
endif;
?>
</ul>
<ul class="list_term" style="display: none;">
<?php
$work_args = array(
'post_type' => 'post',
'category_name' => 'work',
'posts_per_page' => 5
);
$post_work = new WP_Query( $work_args );
if ( $post_work->have_posts() ): while ( $post_work->have_posts() ): $post_work->the_post();
?>
<li> <a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
<?php the_title();?>
</a> </li>
<?php
endwhile;
else :
echo '<p>Not Found.</p>';
endif;
?>
</ul>
<script type="text/javascript">
$( document ).ready( function () {
//设计案例切换
$( '.tab_title_main span' ).mouseover( function () {
var liindex = $( '.tab_title_main span' ).index( this );
$( this ).addClass( 'current' ).siblings().removeClass( 'current' );
$( 'ul.list_term' ).eq( liindex ).fadeIn( 150 ).siblings( 'ul.list_term' ).hide();
var liWidth = $( '.tab_title_main span' ).width();
$( '.tab_title p' ).stop( false, true ).animate( {
'left': liindex * liWidth + 'px'
}, 300 );
} );
} );
</script>
</div>