js 标签切换功能

<style type="text/css">
.table_tag{width:360px;height:220px;overflow:hidden;border:1px solid #333;margin:10px;}
.table_tag .tt_top{width:360px;height:36px;line-height:36px;background-color:#C1E4B2;margin-bottom:10px;}
.table_tag .tt_top ul li{float:left;cursor:pointer;width:88px;height:36px;text-align:center;font-size:14px;line-height:36px;border:1px solid #E0F1D9;}
.table_tag .tt_top ul .current{background:url("/img/base/currentButton4.gif") no-repeat;color:#fff;}
.table_tag .tt_text ul{width:320px;margin:0 20px;}
.table_tag .tt_text ul li{padding-left:20px;border-bottom:1px dotted #333;background:url('/img/base/icon_2.png') no-repeat 0 2px;}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
/**
 * 标签切换
 * num 标签的个数 
 * _this 当前对象this
 * 用法：在点击对象上添加id：**_nav_1
 * 在 要切换的对象上添加id: **_block_1
 * current是切换的时候改变的样式 
 * 这个地方用到了两个样式current nows,所以进行了判断
 */
function switchBlock(num, _this){
	var id = _this.id.replace(/^.+_/,"");
	var name_space = _this.id.replace(/_.+/,"");
	var cls = 'current';
	if(name_space === 'wy'){
		cls = 'nows';
	}
	
	for(var i=1; i<=num; i++)
	{//判断是否有类 如果有就移除
		if($(name_space + "_nav_" + i).className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){
			var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
				$(name_space + "_nav_" + i).className = $(name_space + "_nav_" + i).className.replace(reg,' ');
		}
		
		$(name_space + "_block_" + i).style.display="none";
	}
	
	if(name_space === 'wy'){
		$(_this.id).className="nows";
	}else{
		$(_this.id).className="current";
	}
	$(name_space+"_block_"+id).style.display="block";
}
</script>
<div class='table_tag'>
	<div class='tt_top'>
		<ul>
			<li class='current' id="play_nav_1" onmouseover="switchBlock(4,this)">国际新闻</li>
			<li  id="play_nav_2" onmouseover="switchBlock(4,this)">国内新闻</li>
			<li  id="play_nav_3" onmouseover="switchBlock(4,this)">时政要闻</li>
			<li  id="play_nav_4" onmouseover="switchBlock(4,this)">民生民计</li>
		</ul>
	</div>
	<div class='tt_text'>
	<ul  id="play_block_1">
		<li><a href="#">标准普尔大幅下跌</a></li>
		<li><a href="#">全球股市动荡 不安 黄金涨 </a></li>
		<li><a href="#">全球股市动荡 不安 黄金涨 </a></li>
		<li><a href="#">全球股市动荡 不安 黄金涨 </a></li>
		<li><a href="#">全球股市动荡 不安 黄金涨 </a></li>
		<li><a href="#">全球股市动荡 不安 黄金涨 </a></li>
	</ul>
	<ul style="display:none;" id="play_block_2">
		<li><a href="#">外交部拒绝公开三公经费 </a></li>
		<li><a href="#">外交部拒绝公开三公经费 </a></li>
		<li><a href="#">外交部拒绝公开三公经费 </a></li>
		<li><a href="#">外交部拒绝公开三公经费 </a></li>
		<li><a href="#">外交部拒绝公开三公经费 </a></li>
		<li><a href="#">外交部拒绝公开三公经费 </a></li>
	</ul>
	<ul style="display:none;" id="play_block_3">
		<li><a href="#">中国航母的未来是怎样</a></li>
		<li><a href="#">中国航母的未来是怎样</a></li>
		<li><a href="#">中国航母的未来是怎样</a></li>
		<li><a href="#">中国航母的未来是怎样</a></li>
		<li><a href="#">中国航母的未来是怎样</a></li>
		<li><a href="#">中国航母的未来是怎样</a></li>										
	</ul>
	<ul style="display:none;" id="play_block_4">
		<li><a href="">工资三年不涨，物价却飞涨</a></li>
		<li><a href="">工资三年不涨，物价却飞涨</a></li>
		<li><a href="">工资三年不涨，物价却飞涨</a></li>
		<li><a href="">工资三年不涨，物价却飞涨</a></li>
		<li><a href="">工资三年不涨，物价却飞涨</a></li>
		<li><a href="">工资三年不涨，物价却飞涨</a></li>
	</ul>
	</div>	
</div>


<style type="text/css">
.wy{width:360px;height:280px;border:1px solid #B1C8D7;margin:10px;}
.wy .wy_top{width:360px;height:24px;line-height:24px;}
.wy .wy_top ul{list-style-type:none;}
.wy .wy_top ul li{color:#4C83B8;width:89px;height:24px;line-height:24px;text-align:center;cursor:pointer;float:left;background-color:#E8EFF6;border:1px solid #b1c8d7;border-top:none;border-left:none;}
.wy .wy_top .wy_toph{width:90px;border-right:none;}
.wy .wy_top .nows{background-color:#fff;border-bottom:none;font-weight:bold;text-decoration:underline;}
.wy .wy_text ul{width:320px;margin:10px;}
.wy .wy_text ul li{padding-left:15px;border-bottom:1px dotted #333;}
</style>
<div class='wy'>
	<div class='wy_top'>
		<ul>
			<li class="nows" id="wy_nav_1" onmouseover="switchBlock(4,this)">财经</li>
			<li id="wy_nav_2" onmouseover="switchBlock(4,this)">股票</li>
			<li id="wy_nav_3" onmouseover="switchBlock(4,this)">商业</li>
			<li id="wy_nav_4" onmouseover="switchBlock(4,this)" style="width:90px;border-right:none;">理财</li>
		</ul>
	</div>
	<div class='wy_text'>
		<ul id="wy_block_1">
			<li>财经要闻在这里开始了阿里看</li>
		</ul>
		<ul id="wy_block_2" style="display:none;">
			<li>股市有风险入市须小心</li>
		</ul>
		<ul id="wy_block_3" style="display:none;">
			<li>商道给你明确的解析</li>
		</ul>
		<ul id="wy_block_4" style="display:none;">
			<li>你不理财 才不理你 理财从现在开始</li>
		</ul>						
	</div>
</div>