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 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>?