Jquery UI Tabs 动态添加页签，并跳转到新页签

需求：

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"){// 跳转到扩展内容页签时触发}}});

Jquery UI Tabs 动态添加页签，并跳转到新页签相关推荐

php表格tr,jQuery+ajax实现动态添加表格tr td功能示例
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: ajax部分: va ...
jQuery Ui Tabs插件使用问题记录
1.为标签页添加关闭按钮,单击该按钮移除标签页,添加双击标签页移除.其中按钮图标使用了font-awesome字体图标. 先上效果图: 样式如下: #nav-tabs ul li a .tab-clo ...
jquery ui tabs详解(中文) 【转载】
1 属性 1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和succe ...
jquery 如何获取动态添加的元素
2019独角兽企业重金招聘Python工程师标准>>> <td><buttonclass="del">删除</button>& ...
原生态JS和JQuery版的动态添加、删除表格行
过了太久,JQuery都生疏了,闲来没事,写着玩玩. 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). >原生态 ...
[小程序项目] 使用微信开发者工具新闻小项目轮播图新闻列表页点击跳转新闻详情页登录获取用户基本信息
文章目录效果 Gitee 目录结构 app.json 首页 pages/news/news.wxml pages/news/news.wxss pages/news/news.js 配置网络请求 u ...
element ui Tag 动态添加标签
1.首先调接口获取到标签列表, // 级联选择器如果选择的不是第三级菜单async getParamsData() {if (this.selectedCateKeys.length !== 3) { ...
jquery ui tabs
1 active 不是select 2 触发事件利用activate $( ".selector" ).tabs({ activate: function( e ...
一个简单的jQuery例子，动态添加表格和删除
效果如图: 详细代码如下: <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

Jquery UI Tabs 动态添加页签，并跳转到新页签

Jquery UI Tabs 动态添加页签，并跳转到新页签相关推荐

最新文章

热门文章