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

时间:2021-10-01 20:22:19

[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. });

[转] JQuery UI Tabs 动态添加页签,并跳转到新页签的更多相关文章

  1. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  2. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 在vue中无论使用router-link 还是 &commat;click事件,发现都没法从列表页点击跳转到内容页去

    在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...

  4. jquery&period;UI&period;tabs

    今天对jquery UI的tabs进行了进一步的了解,目的是想把死板的切换效果变得动感点,不过经过这进一步的了解,发现它并不合适或都说并不能实现我想要的效果,我想要的效果就是类似淘宝商城的banner ...

  5. 获取JQuery UI tabs中被选中的tabs的方法

    JQuery标签事件处理实例 如果你正在使用JQuery tabs而且想从基本的功能扩展到自定义的功能,这是你最好知道如何处理JQuery的点击事件. 在这篇文章中: 1.回顾如何添加当tab被点击时 ...

  6. jquery ui tabs详解&lpar;中文&rpar;

    1 属性1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和succes ...

  7. 如何解决jQuery Validation针对动态添加的表单无法工作的问题?

    为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案 ...

  8. jQuery如何获取动态添加的元素

    1. 使用 on()方法        本质上使用了事件委派,将事件委派在父元素身上     自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...

  9. jquery监听动态添加的input的change事件

    使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...

随机推荐

  1. CM12&period;1&sol;13&period;0编译教程

    环境搭建 1.安装64位Ubuntu系统(实体安装.虚拟机安装均可) 注意:要求机器至少4G内存(虚拟机至少分配4G内存),硬盘至少100G空间(源码20G+,编译后整个目录约60~70G) 安装方法 ...

  2. 移动端WEB页面

    百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...

  3. LAMP一键安装脚本 from&colon;秋水逸冰

    Install LAMP(Linux + Apache + MySQL + PHP ) for CentOS/Redhat/Fedora 项目地址:https://github.com/teddysu ...

  4. Mac和iOS开发资源汇总

    小引 本文主要汇集一些苹果开发的资源,会经常更新,建议大家把这篇文章单独收藏(在浏览器中按command+D). 今天(2013年7月19日)收录了许多中文网站和博客.大家一定要去感受一下哦. 如果大 ...

  5. SqlServer死锁与阻塞检测脚本

    IF EXISTS (SELECT * FROM sysobjects WHERE [name] = 'sp_Lock_Scan') DROP PROCEDURE sp_Lock_Scan GO CR ...

  6. Effective C&plus;&plus; 10

    10.假设写了operator new,就要同一时候写operator delete. 为什么要写自己的operator new和delete,首先这不叫重载,这叫隐藏. new仅仅是用来申请空间,而 ...

  7. James Munkres Topology&colon; Lemma 21&period;2 The sequence lemma

    Lemma 21.2 (The sequence lemma) Let \(X\) be a topological space; let \(A \subset X\). If there is a ...

  8. Django的forms表单组件批量设置字段样式

    from django import forms from . import models class UserInfoModelForms(forms.ModelForm): class Meta: ...

  9. 初识异步、并发处理纯代码及Demo

    多线程Thread 处理 Thread thread = new Thread(()=> { ; i < ; i++) { Console.WriteLine("这是第&quot ...

  10. 构造方法为private与类修饰符为final

    构造方法为private的:在这个类外1:不能继承这个类2:不能用new来产生这个类的实例 在这个类内:1:可以继承这个类2:可以用new来产生这个类的实例 类修饰符为final的:在这个类外1:不能 ...