tab切换卡效果

一、JS

<script language="javascript" type="text/javascript">
        function changeTab(index)
        {
            for (var i=1;i<=7;i++)
            {
                document.getElementById ("li_"+i).className ="normal";
                document.getElementById ("li_"+index).className ="selected";
                document.getElementById ("div"+i).style.display  ="none";
            }
            //document.getElementById ("div1").innerText= "tab"+index;
            document.getElementById ("div"+index).style.display  ="block";
       }
    </script>

二、页面

<div id="divMainTab">
      <ul style="list-style: none; margin: 0px; padding: 0px; border-collapse: collapse;">
        <li id="li_1" class="selected" onmouseover="changeTab('1')"><a href="#">最佳酒店 </a> </li>
        <li id="li_2" class="normal" onmouseover="changeTab('2')"><a href="#">最佳酒店集团</a> </li>
        <li id="li_3" class="normal" onmouseover="changeTab('3')"><a href="#">最佳航空公司</a> </li>
        <li id="li_4" class="normal" onmouseover="changeTab('4')"><a href="#">最佳目的地</a> </li>
        <li id="li_5" class="normal" onmouseover="changeTab('5')"><a href="#">推荐邮轮</a> </li>
        <li id="li_6" class="normal" onmouseover="changeTab('6')"><a href="#">随行优选</a> </li>
        <li id="li_7" class="normal" onmouseover="changeTab('7')"><a href="#">年度旅行创见人物奖</a> </li>
      </ul>
    </div>

<div   id="div1" style ="display :block" class ="divContent">
      <div class="sub">
        <div class="sub-1"><img src="images/LOGO.jpg" width="127" height="101" /></div>
        <div class="sub-2">中国航空公司<br />
102票</div>
        <div class="sub-input"><img style="margin-left:20px" src="images/input.jpg" width="83" height="21" /></div>
      </div>
      <div class="sub">
        <div class="sub-1"><img src="images/LOGO.jpg" width="127" height="101" /></div>
        <div class="sub-2">中国航空公司<br />
102票</div>
        <div class="sub-input"><img style="margin-left:20px" src="images/input.jpg" width="83" height="21" /></div>
      </div>
</div>