Question

jquery 动态添加tab 效果

用jquery中的append()方法添加了一个tab，切换效果是：
// Tab效果
$("#tab").tabs(".tabContent", {
tabs: "input"
});
在页面中写的可以实现切换，用append()添加的就不能却很效果。
html：body中的内容
<script language="javascript" type="text/javascript" src="jquery-1.7.1.js"></script>
<script language="javascript" type="text/javascript" src="jquery.tools.js"></script>
<script language="JavaScript" type="text/javascript">
$().ready(function() {
// Tab效果
$("#tab").tabs(".tabContent", {
tabs: "input"
});

$("#add").live("click",function(){
$("#tab").append('<li>标题4</li>');
$("#pan").append('<div class="tabContent" style="border:1px solid red">标题4内容</div>');
});
});
</script>
<input type="button" id="add" value="添加"/>
<ul id="tab">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<div id="pan">
<div class="tabContent" style="border:1px solid red">标题1内容</div>
<div class="tabContent" style="border:1px solid red">标题2内容</div>
<div class="tabContent" style="border:1px solid red">标题3内容</div>
</div>

Answer 1

$("#tab").tabs(".tabContent", {
tabs: "input"
});

试试把这上面的 tabs 功能定义为一个 function
例如
function tabs_run() {
....
}

然後在 click function 里面捕捉 event 完结时侯再次呼叫这个 tabs_run()
例如
$('#add').live('click', function() {
.....
tabs_run();
}

不过我疑惑了，你的 tabContent 没有设置 rel 或者 id… Tabs 是怎样侦测 index 的呢？
点击哪个 <li> 会 load 哪个 tabContent 呢？

追问

我用的jquery Tools.js 、

追答

你误会了问题
我知道是用 JQuery Tools，你在 有写
我是问你新建一个 tabContent，function tabs 怎样定义哪个 对应 哪个 tabContent
另外用 tabs_run() 类似的办法解决了吗？

Answer 2

append()只是追加元素，而并没有对新加元素进行效果渲染，当然就没效了
先照着API写

看明白内核代码实现，再去发明创造

追问

怎么重新渲染呀？

追答

看 jquery.tabs()的api，里面明显写着怎么动态添加一个tab

追问

我用的jquery Tools.js 这个我找不到API

追答

http://jqueryui.com/demos/tabs/
你code从哪下载的嘛！去jq官网看，you know ？

Answer 3

你好，你这个解决了吗？可以吧你做的demo发给我吗？我现在也要做一个这个！企鹅邮箱185766199