使用javacript和div实现Tab切换效果

 看好多网站都有这样的页面显示效果，就尝试做了一个简易的。
 

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login"  %>

<! 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  runat ="server" >
     < title > 无标题页 </ title >
     < script  type ="text/javascript" > ...
    function SelTab(id)
     ...{
       var tab1=document.getElementById('view1');
       var tab2=document.getElementById('view2');
       var tab3=document.getElementById('view3');
       
       if(id=="one")
       ...{
         tab1.style.display="block";
         tab2.style.display="none";
         tab3.style.display="none";
       }
        if(id=="two")
       ...{
         tab1.style.display="none";
         tab2.style.display="block";
         tab3.style.display="none";
       }
        if(id=="three")
       ...{
         tab1.style.display="none";
         tab2.style.display="none";
         tab3.style.display="block";
       }
     } 
     </ script >
</ head >
< body  onload ="SelTab('one')" >
     < form  id ="form1"  runat ="server" >

     < div  style =" width:200px; border :solid 2px red" >
        < a  href  ="#"  onmouseover  ="SelTab('one')" > Tab1 </ a >   &nbsp;&nbsp;   &nbsp;
        < a   href  ="#"  onmouseover  ="SelTab('two')" > Tab2 </ a >   &nbsp;&nbsp;   &nbsp;
       < a   href  ="#"  onmouseover  ="SelTab('three')" > Tab3 </ a >   &nbsp;&nbsp;   &nbsp;
       < br  />
       < br  />
        < div  id ="view1" >
         < a  href  ="#" > 这是一条新闻 </ a >   < br  />
        < a  href  ="#" > 这是一条新闻 </ a >   < br  />
        < a  href  ="#" > 这是一条新闻 </ a >   < br  />
        < a  href  ="#" > 这是一条新闻 </ a >   < br  />
        < a  href  ="#" > 这是一条新闻 </ a >   < br  />
        </ div >
        < div  id ="view2" >
         < a  href  ="#" > view2 中的新闻 </ a >   < br  />
        < a  href  ="#" > view2 中的新闻 </ a >   < br  />
        < a  href  ="#" > view2 中的新闻 </ a >   < br  />
        < a  href  ="#" > view2 中的新闻 </ a >   < br  />
        < a  href  ="#" > view2 中的新闻 </ a >   < br  />
        </ div >
        < div  id ="view3" >
         < a  href  ="#" > Hello world </ a >   < br  />
        < a  href  ="#" > Hello world </ a >   < br  />
          < a  href  ="#" > Hello world </ a >   < br  />
        < a  href  ="#" > Hello world </ a >   < br  />
        < a  href  ="#" > Hello world </ a >   < br  />
        </ div >
     
     </ div >
     </ form >
</ body >
</ html >