前台: <ul class="tabs">
     <li><a href="#" onFocus="this.blur()">生活技能</a></li>
     <li><a href="#" onFocus="this.blur()">健康养生</a></li>
     <li><a href="#" onFocus="this.blur()">英语教程</a></li>
 </ul>
 <div class="panes">
   <div>
     tab1内容
   </div>
   <div>
     tab2内容
   </div>
   <div>
     tab3内容
   </div>
</div>
<script>
    $(function () {
        $("ul.tabs").tabs("div.panes > div");
    });
</script>CSS代码:/* root element for tabs  */
ul.tabs { 
list-style:none; 
margin:0 !important; 
padding:0;
border-bottom:lid #666;
height:23px;
width:219px;
}/* single tab */
ul.tabs li { 
float:left;  
text-indent:0;
padding:0;
margin:0 !important;
list-style-image:none !important; 
display:block;
}/* link inside the tab. uses a background image */
ul.tabs a { 
background: url(../images/tab.gif);
font-size:12px;
display:block;
height: 23px;  
line-height:23px;
width: 73px;
text-align:center;
text-decoration:none;
color:#333;
padding:0px;
margin:0px;
position:relative;
top:0px;
}
ul.tabs a:active {
outline:none;
}
ul.tabs a:hover {
color:red;
}ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
background:url(../images/tab_1.gif);
cursor:default !important; 
color:red !important;
}
还有一个就是jquery的脚本。目前的效果是需要点击tab2.tab3才能切换,如何修改为鼠标经过就自动切换,据说可以在css写个display:block就可以实现,求高手解答?????