tab选项问题

我想参照如下页面图片的形式自己编写一个包含五个tab选项的页面http://img03.taobaocdn.com/imgextra/i3/338033196/T24eVhXdVMXXXXXXXX_!!338033196.jpghttp://img03.taobaocdn.com/imgextra/i3/338033196/T25KNhXeXMXXXXXXXX_!!338033196.jpg
可是最终我自己实现的效果是如下http://img04.taobaocdn.com/imgextra/i4/338033196/T2j10hXdXMXXXXXXXX_!!338033196.jpg
我的html源码如下：<html>
<head>
 <meta http-equiv="content-type" content="text/html;charset=gb2312" />
 <title>tab选项</title>
 <link rel="stylesheet" href="1.css" type="text/css" />
 <script language="javascript" type="text/css">
  function changtab(n)
  {
       for(i=1;i<=document.getElementsByTagName("li").length;i++)
     {   
       document.getElementById('info'+i).style.display='none';
       document.getElementById('tab'+i).className='none';
      }
  document.getElementById('info'+n).style.display='block';
  document.getElementById('tab'+n).className='cur';
  }
  </script>
</head>
<body>
    <ul id="tab">
    <li><a id="tab1" onmouseover="changtab(1)" class="cur" href="#">课程特色</a></li>
    <li><a id="tab2" onmouseover="changtab(2)" href="#">教学方法</a></li>
    <li><a id="tab3" onmouseover="changtab(3)" href="#">课程体系</a></li>
    <li><a id="tab4" onmouseover="changtab(4)" href="#">课程规划</a></li>
    <li><a id="tab5" onmouseover="changtab(5)" href="#">课程安排</a></li>
    </ul>
 <div id="info1">
   <a href="#">本课程主要特色</a>&nbsp;<br>
      <a href="#">课程地位</a>&nbsp;&nbsp;<br>
      <a href="#">目前还存在的问题</a><br />
      &nbsp;
</div>
<div id="info2">
   <a href="#">教学方法和教学手段</a>&nbsp;<br>
       <a href="#">课程的历史</a>&nbsp;&nbsp;<br>
       <a href="#">目前存在的优势</a><br />
       &nbsp;
</div>
<div id="info3">
   <a href="#">课程负责人</a>&nbsp;<br>
      <a href="#">课程团队</a>&nbsp;&nbsp;<br>
      <a href="#">课程教材</a><br />
      &nbsp;
</div>
<div id="info4">
   <a href="#">课程目的</a>&nbsp;<br>
      <a href="#">课程教学</a>&nbsp;&nbsp;<br>
      <a href="#">课程硬件</a><br />
      &nbsp;
</div>
<div id="info5">
   <a href="#">授课对象</a>&nbsp;<br>
      <a href="#">授课时间</a>&nbsp;&nbsp;<br>
      <a href="#">授课地点</a><br />
      &nbsp;
</div>
</body>
</html>
  
 
css源码如下#tab {
margin: 0px;
padding: 0 0 24px 0;
list-style-type: none;
border-bottom:1px solid #11a3ff;
}
#tab li {
font-size: 14px;
color: #993300;
float:left;
margin:0 4px 0 0;}
div { background-color: #FFeeee;
padding: 10px;
border-left:1px solid #11a3ff; /* 左边框 */
border-right:1px solid #11a3ff; /* 右边框 */
border-bottom:1px solid #11a3ff; /* 下边框 */
}
#info2 {
display: none;
}
#tab a {
display: block;/**/
float:left;
padding: 0 10px;
height:23px;
line-height:23px;
border: 1px solid #11a3ff;

text-decoration: none;
background-color: #BBDDFF;

}
#tab a:hover,#tab a.cur {
border-bottom: 1px solid #ffeeee;
color: #F74533;
background-color: #FFeeee;
}
请各位大侠指出我错在哪

解决方案 »

  1.   


     <script>
      function changtab(n)
      {
           for(i=1;i<=document.getElementsByTagName("li").length;i++)
         {   
           document.getElementById('info'+i).style.display='none';
           document.getElementById('tab'+i).className='none';
          }
      document.getElementById('info'+n).style.display='block';
      document.getElementById('tab'+n).className='cur';
      }
      </script>