jquery的tab插件2

< !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" > 
* 
{ 
margin:0; 
padding:0; 
} 
ul 
{ 
list-style-type:none; 
overflow:auto; 
_display:inline-block; 
} 
ul li 
{ 
display:inline; 
} 
.imagebox { 
    border:1px solid    red; 
    width:128px; 
    margin:10px auto; 
    padding:10px; 
    border:2px solid #F4EA92; 
    background-color:#FDFCF3; 
} 
.imagebox ul 
{ 
padding:5px; 
background-color:#FBF8E1; 
} 
.imagebox a { 
    display:block; 
    width:25px; 
    height:25px; 
    line-height:25px; 
    text-align:center; 
    float:left; 
    outline:none; 
    text-decoration:none; 
} 
.imagebox a:hover { } 
.imagebox a.selected { 
    background:snow; 
    color:#222; 
    font-weight:bold; 
    text-decoration:underline; 
    border:1px solid #F7EFAB; 
} 
.imagebox img { display:inline-block;margin:5px 0;} 
</style> 
</head> 
< body > 
< div  class ="imagebox idTabs" >    
     < img  id ="img1"  src ="imgs/icon1.png" >    
     < img  id ="img2"  src ="imgs/icon2.png" >    
     < img  id ="img3"  src ="imgs/icon3.png" >    
     < img  id ="img4"  src ="imgs/icon4.png" >    
     < ul >    
         < li > < a  class ="selected"  href ="#img1" >1 </a> </li>    
         < li > < a  href ="#img2" >2 </a> </li>    
         < li > < a  href ="#img3" >3 </a> </li>    
         < li > < a  href ="#img4" >4 </a> </li>    
     </ul>        
</div>    
< script  type ="text/javascript" >    
    $(".imagebox").idTabs("!mouseover");    
</script> 
</body> 
</html> 

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/109132，如需转载请自行联系原作者