<html>
<head>
<title>tabs</title>
<script language="javascript" type="text/javascript" src="./js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui.js"></script>
<link rel="stylesheet" href="./css/jquery-ui.css"/>
<script language="javascript" type="text/javascript">
$(function(){
$("#tabs").tabs({
event:"mouseover",
fx:{
opacity: 'toggle'
},
select:0
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab1">面板一</a></li>
<li><a href="#tab2">面板二</a></li>
<li><a href="#tab3">面板三</a></li>
<li><a href="#tab4">面板四</a></li>
</ul>
<div id="tab1">1111111111111</div>
<div id="tab2">2222222222222222222</div>
<div id="tab3">333333333333333333333333</div>
<div id="tab4">44444444444444444444444444444</div>
</div>
</body>
</html>