js 标签切换效能
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>