[转] JQuery UI Tabs 动态添加页签，并跳转到新页签

[From] https://blog.csdn.net/zhangfeng2124/article/details/76672403

需求：

1、tabs默认只有一个页签，但是需要点击某按钮，动态添加页签（添加多个）

2、tabs动态添加页签后，需要跳转到新添加的页签

查找tabs api以及tabs的源码后，发现tabs没有直接实现这两个功能的方法 附上一文化tabs api链接：http://www.css88.com/jquery-ui-api/tabs/

最后通过查看tabs的页签添加规则后，自己实现动态添加和跳转。

tabs添加的页签都是在class属性值为ui-tabs-nav下的ui标签下，页签头都是li标签

找到规则后，那么动态添加页签就容易了。

请看代码：

1. var tabs = $( "#tabs" ).tabs();
2. tabs.find( ".ui-tabs-nav" ).append( "<li id='add_tab' ><a href='#tabs-2'>页签1</a></li>" );
3. tabs.tabs( "refresh" );

注意tabs的refresh方法，必须要刷新一下，新添加的页签才会生效。

下面解决跳转新页签问题：

tabs也没有提供获取所有页签的方法，所以还得自己想办法获取所有的页签，再来比较。

查看tabs生成的html发现，tabs生成的li标签有个aria-controls属性，这个属性的值就是我们自定义的页签名（tabs-2）

请看代码：

1. var lies = tabs.find( ".ui-tabs-nav li" );
2. for(var i = 0; i < lies.length; i++){
3. if($(lies[i]).attr("aria-controls") == 'tabs-2'){
4. $( "#tabs" ).tabs( "option", "active", i );
5. }
6. }

动态添加的页签下具体内容，需要预先定义好并隐藏。

ok，就这么愉快的解决了。

下面附上一个完整的tabs例子，例了与上面动态添加不相关：

HTML：

1. <div id="tabs">
2. <ul>
3. <li><a href="#tabs-1">基本信息</a></li>
4. <li><a href="#tabs-2">扩展内容</a></li>
5. </ul>
6. <div id="tabs-1"  style="width:97%;overflow-y:auto;margin: 0 auto;height: 95%;">基本信息</div>
7. <div id="tabs-2"  style="width:97%;overflow-y:auto;margin: 0 auto;height: 95%;">扩展内容</div>
8. </div>

JS：

1. $( "#tabs" ).tabs({
2. beforeActivate: function( event, ui ) {
3. var id = ui.newPanel[0].id;
4. if(id == "tabs-1"){
5. // 跳转到基本信息页签时触发
6. }
7. if(id == "tabs-2"){
8. // 跳转到扩展内容页签时触发
9. }
10. }
11. });