<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,td,th {font-size: 12px;}
body {margin: 0px;margin: 0px;}
.clear{ clear:both;}
a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框,避免出现奇怪的选中区域*/
:focus{outline:0;}
.test{width:100%; margin-top:50px; height:250px; border:1px solid red;}
.test ul{list-style:none; margin:0px;margin-top:4px;padding:0px; border-bottom:1px solid red; height:30px;}
.test li{float:left;width:100px;margin-left:5px;line-height:30px; border:1px solid red; border-bottom:0px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#000000;text-decoration:none;}
.test a:visited{color:#000000;text-decoration:none;}
.test a:hover{text-decoration:none;}
.onselect{font-weight:bold;background:url(images/spritebg.png) no-repeat 0px 12px;}
.noselect{font-weight:normal;background:normal}
</style>
<script>
<!--
function setTab(obj,tagName){
var list=document.getElementsByName(tagName);
for(i=0;i<list.length;i++){
list[i].className="noselect";
}
obj.className="onselect";
}
</script>
</head>
<body>
<div class="test">
<ul>
<li><a href="#" οnclick="setTab(this,'tablink')" name="tablink" class="onselect">首页</a></li>
<li><a href="#" οnclick="setTab(this,'tablink')" name="tablink">产品介绍</a></li>
<li><a href="#" οnclick="setTab(this,'tablink')" name="tablink">服务介绍</a></li>
<li><a href="#" οnclick="setTab(this,'tablink')" name="tablink">技术支持</a></li>
<li><a href="#" οnclick="setTab(this,'tablink')" name="tablink">立刻购买</a></li>
<li><a href="#" οnclick="setTab(this,'tablink')" name="tablink">联系我们</a></li>
</ul>
<div class="clear"></div>
<div class="clear">1121</div>
</div>
</body>
</html>