[转] 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标签

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

请看代码：

 

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

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

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

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

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

请看代码：

 

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

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

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

 

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

HTML：

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

JS：

 

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