当博客系统中有很多子菜单的时候，我们可以把这些放到一个tab里面显示，这样省的空间还使的页面多元化一些。今天花了同个小时的功夫整理了一下，因为本人对web基本上不通，完全是边搞边搜索。现在把代码贴出来。
用到了jquery.js，这个大家可以网上搜，其实N多网站都有，就不多说了。看代码:

/*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');
	});
});

以上代码放入PHP页面或者你自己包含的js文件都可以。
光JS还不够，我们需要CSS样式来隐藏和显示DIV，看代码：
[css]#tab-title{margin-top:20px;border: solid 1px #dbdbdb;background:#FFF;} #tab-button{float:left;text-align:center;cursor:pointer;height:39px;border-right:1px solid #dbdbdb;} #tab-title h1{height:40px;line-height:40px;} #tab-title .selected{color:#fb4f4f;font-weight:bold;z-index:1;height:40px;background:#FFF;} #tab-title span{width:16%;} #tab-content{border-top:solid 1px #dbdbdb;margin-top:-1px;} #tab-content .hide{display:none;} #tab-content ul{padding:5px 10px;overflow:hidden;} #tab-content ul li{line-height:25px;list-style:none}[/css]
最后就是PHP代码了，这是针对我的博客，所以这里面需要稍微修改一下，改成对应你的。

	

	'1'));//分类1下面的所有子菜单
		$b = 1;
		foreach($categories as $category) {
			if($b)
				echo ''.$category->name.'';
			else
				echo ''.$category->name.'';
			$b = 0;
		}
	?>
	
	

	

	
		
>
			

				

					$category->cat_ID,'showposts' => 12);
						query_posts($args); 
						if (have_posts()) :while (have_posts()) : the_post();
						if($while_index==0)echo '
'; else if($while_index==6)echo '
';
					?>
					

					

					
					 
					post_date;
						$t2=date("Y-m-d H:i:s");
						$diff=(strtotime($t2)-strtotime($t1))/3600;
						if($diff<24){echo "NEW";}
						printf( __( ' %2$s', 'frontopen' ), 'i1', get_the_category_list( ', ' ) );
						echo ' ';
						the_time("m-d");
						echo '';
						++$while_index;
						if($while_index==6)echo '
'; else if($while_index==12)echo '
';
					?>
					
					
				
			
		
	
	

虽然主页已经显示了，但是插一张图片显的更加美丽一些。

最后补充一点，因为我发现这个动画点快了有点不太完美，所以我改了下JS，去掉动画，效率也会更高点。当然没有动画肯定视觉效果稍差了一点。

/*TAB选项切换*/
jQuery(document).ready(function(){
	var $span = jQuery('#tab-title span');
	$span.click(function(){
		jQuery(this).addClass("selected").siblings().removeClass();
		var $ul = jQuery("#tab-content > ul");
		var $t = $span.index(this);
		$ul.css('display','none');
		$ul.eq($t).css('display','block');
	});
});

 

本文链接:https://www.it72.com/6039.htm