<!--引入jquery类库文件-->
<scriptsrc="js/jquery-1.7.1.min.js"></script>
<scriptsrc="js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css样式类库-->
<link rel="stylesheet"type="text/css" href="css/jquery-ui-1.8.18.custom.css"/> /*juqery代码部分*/
<script>
//当窗体加载完毕的时候触发该匿名函数
$(function(){
$('#tabs').tabs({ //根据id选择器获取当前的id选择器的jquery对象
event:'click', //面板是展开的事件效果,默认是click效果
fx:{
opacity:'toggle'//透明度 从无到有的一个动画效果
},
selectd:1 //默认选中模板
});
$('#tabs').tabs('remove',2);//移除面板
//$('#tabs').tabs('add','tab-4.html','four');//添加一个面板
});
</script>
/*html代码部分*/
<h1>模拟tabs效果</h1>
<div id='tabs'>
<ul>
<li><a href='#tab-1'>面板1</a></li>
<li><a href='#tab-2'>面板2</a></li>
<li><a href='#tab-3'>面板3</a></li>
</ul>
<div id="tab-1">
新闻:齐天大圣
</div>
<divid="tab-2">
新闻:齐天大圣-啊啊
</div>
<divid="tab-3">
新闻:齐天大圣-拜拜
</div>
</div>