jquery的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 >jQuery插件Tab选项卡-选择指定栏 </title> 
< script  type ="text/javascript"  src ="jquery-1.2.6.min.js" > </script> 
< script  type ="text/javascript"  src ="jquery.idTabs.min.js" > </script> 
< style  type ="text/css" > 
/*主容器*/ 
.usual { 
    background:#cee; 
    color:#111; 
    padding:15px 20px; 
    width:500px; 
    border:1px solid #099; 
    margin:8px auto; 
} 

/*选项卡*/ 
.usual ul 
{ 
margin:0; 
padding:0; 
padding-left:2em; 
overflow:auto;/*火狐等清理浮动*/ 
_display:inline-block;/*ie6清理浮动*/ 
} 
.usual li { list-style:none; float:left;} 
.usual ul a { 
    display:block; 
    padding:6px 10px; 
    text-decoration:none; 
    font:12px Arial; 
    color:#FFF; 
    background:#22A4C4; 
    outline:none; 
} 
.usual ul a:hover { 
    color:#FFF; 
    background:#0B718B; 
    } 
.usual ul a.selected { 
    color:#000; 
    background:snow; 
    cursor:default; 
    } 
     
    /*tab页*/ 
.usual div { 
    padding:10px 10px 8px 10px; 
    background:snow; 
    font:10pt Arial; 
} 
</style> 
</head> 
< body > 
< div  id ="usual1"  class ="usual" >    
     < ul >    
         < li > < a  href ="#tab1" >教育 </a> </li>    
         < li > < a  href ="#tab2" >儿童 </a> </li>    
         < li > < a  href ="#tab3" >育儿 </a> </li>    
     </ul>    
     < div  id ="tab1" >金融危机致使校园招聘减少... </div>    
     < div  id ="tab2" >青少年网上普法大赛... </div>    
     < div  id ="tab3" >今天你为宝宝许愿了吗... </div>    
</div>    
< script  type ="text/javascript" >    
    $("#usual1 ul").idTabs("tab2"); //代码选择第二栏 
</script> 
</body> 
</html> 

< !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 >jQuery插件Tab选项卡-不使用脚本 </title> 
< script  type ="text/javascript"  src ="jquery-1.2.6.min.js" > </script> 
< script  type ="text/javascript"  src ="jquery.idTabs.min.js" > </script> 
< style  type ="text/css" > 
/*主容器*/ 
.usual { 
    background:#cee; 
    color:#111; 
    padding:15px 20px; 
    width:500px; 
    border:1px solid #099; 
    margin:8px auto; 
} 

/*选项卡*/ 
.usual ul 
{ 
margin:0; 
padding:0; 
padding-left:2em; 
overflow:auto;/*火狐等清理浮动*/ 
_display:inline-block;/*ie6清理浮动*/ 
} 
.usual li { list-style:none; float:left;} 
.usual ul a { 
    display:block; 
    padding:6px 10px; 
    text-decoration:none; 
    font:12px Arial; 
    color:#FFF; 
    background:#22A4C4; 
    outline:none; 
} 
.usual ul a:hover { 
    color:#FFF; 
    background:#0B718B; 
    } 
.usual ul a.selected { 
    color:#000; 
    background:snow; 
    cursor:default; 
    } 
     
    /*tab页*/ 
.usual div { 
    padding:10px 10px 8px 10px; 
    background:snow; 
    font:10pt Arial; 
} 
</style> 
</head> 
< body > 
< div  id ="usual1"  class ="usual" >    
     < ul  class ="idTabs" >    
         < li > < a  href ="#tab1" >教育 </a> </li>    
         < li > < a  href ="#tab2" >儿童 </a> </li>    
         < li > < a  href ="#tab3"  class ="selected" >育儿 </a> </li>    
     </ul>    
     < div  id ="tab1" >金融危机致使校园招聘减少... </div>    
     < div  id ="tab2" >青少年网上普法大赛... </div>    
     < div  id ="tab3" >今天你为宝宝许愿了吗... </div>    
</div>    
</body> 
</html>