js tab 切换求助

为什么不起作用？<!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>
*{margin:0;
padding:0;}
ul{margin:0;
padding:0;
list-style:none;}
li{margin-left:2px;
float:left;
width:50px;
height:20px;
background-color:#CCCCCC;}
#main{clear:left;
width:200px;
height:50px;
background:#E3DBF7;}
.hid{display:none;}
#m1,#m2,#m3{width:200px;
height:50px;}
.black{background:#000000;}
</style>
<script type="text/javascript" language="javascript">
function app(tag,cont){
for(i=1;i<4;i++){
if("t"+i==tag){
document.getElementId(tag).className="black";
}
else{document.getElementId("t"+i).className="";}
if("m"+i==cont){
document.getElementId(cont).className="";
}else{document.getElementId("m"+i).className="hid"}}
}
</script>
</head>
<ul>
  <li id="t1" onclick="app('t1','m1')" class="black">1</li>
  <li id="t2" onclick="app('t2','m2')">2</li>
  <li id="t3" onclick="app('t3','t3')">3</li>
</ul>
<div id="main">
   <div id="m1" >内容一</div>
   <div id="m2" class="hid">内容二</div>
   <div id="m3" class="hid">内容三</div> 
</div>
</body>
</html>