<!-- 引入jquery類庫文件-->
<script src="../jquery/jquery-1.7.1.js"></script>
<script src="../jquery/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css-->
<link rel="stylesheet" href="../jquery/css/jquery-ui-1.8.18.custom.css" />
<script>
//當窗體加載完畢的時候 出發該匿名函數
//$(document) 把dom對象轉換成jquery對象
//
$(function(){
$("#tabs").tabs({
event:"click", //even面板激活的事件效果處理 默認爲 單機效果
// disabled:[1], // 面板不可用 1：代表第二個面板 [1,2]
fx:{
opacity:'toggle' //透明度 從無到有的動畫效果
},
selected:1 //默認選中面板
}); //根據id選擇器獲取當前的id選擇器的jquery對象
//移除一個面板
$("#tabs").tabs('remove',2);
//添加一個面板
$("#tabs").tabs('add',"tabs4.html","four");
});
</script>
<!--
jquery UI使用前提
第一步
引入別人的類庫文件
js類庫
css樣式類庫文件
第二步：模擬實現
-->
<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>
<li><a href="tabs4.html">面板4</a></li>
</ul>
<div id="tab-1">
新聞-齊天大聖 大鬧天宮 貝玉東
</div>
<div id="tab-2">
新聞-齊 齊雪松 貝玉東
</div>
<div id="tab-3">
新聞 上半年 就弄了 貝玉東
</div>
</div>
tabs4.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>無標題文檔</title>
</head>
<p>你咋這樣呢！！！！！！！！！！！！！！！</p>
<body>
</body>
</html>
