Question

所以，在多年阅读SO问题和答案之后，我第一个问题的时间。我觉得这个很棘手：

我有一个带有Jquery ui Tabs的页面。第一个选项卡内容是一个大表，其中包含很多附加到表元素的函数。其他标签的内容与此问题无关，主要是文字。

我想要的是什么：点击第二个标签更改第一个标签和第二个标签内容的某些属性获取＆＃34;活动状态＆＃34; （当然第一个标签＆＃34;非活动＆＃34;）。第二个选项卡实际上是空的，内容仍显示第一个选项卡内容（有一些更改）。

为什么？我已经尝试克隆第一个标签内容并将其插入第二个标签上，但是，由于我认为它的大小和功能很多，所以非常懒散。初始加载也很慢，我不想加载第二个版本并加倍初始加载时间。

我尝试了什么：我曾尝试在＆＃34; beforeActivate＆＃34;之前操纵标签属性。部分工作的事件：使用以下代码：单击第二个选项卡使其处于活动状态但在此之后，第一个选项卡不会响应点击，直到选择另一个选项卡。

    beforeActivate: function( event, ui ) {
        if(ui.newTab.index() == 1){
            event.preventDefault();
            var activeobj = $( ".ui-tabs-nav li.ui-state-active" );
            activeobj.prop('tabindex', '-1');
            activeobj.prop('aria-selected', 'false');//not sure if the aria properties really needs changing
            activeobj.prop('aria-expanded', 'false');
            ui.oldTab.removeClass('ui-tabs-active ui-state-active');

            ui.newTab.addClass('ui-tabs-active ui-state-active');
            var newactiveobj = $( ".ui-tabs-nav li.ui-state-active" );
            newactiveobj.prop('tabindex', '0');
            newactiveobj.prop('aria-selected', 'true');
            newactiveobj.prop('aria-expanded', 'true');
        }
        else if(ui.oldTab.index() == 1){
            var activeobj = $( ".ui-tabs-nav li.ui-state-active" );
            activeobj.prop('tabindex', '-1');
            activeobj.prop('aria-selected', 'false');
            activeobj.prop('aria-expanded', 'false');
            ui.oldTab.removeClass('ui-tabs-active ui-state-active');
            if(ui.newTab.index() == 0){
                event.preventDefault();
                ui.newTab.addClass('ui-tabs-active ui-state-active');
                var newactiveobj = $( ".ui-tabs-nav li.ui-state-active" );
                newactiveobj.prop('tabindex', '0');
                newactiveobj.prop('aria-selected', 'true');
                newactiveobj.prop('aria-expanded', 'true');
            }
        }
    }

下一个问题是如果点击第二个标签，则来自更高标签。在这种情况下，将显示Tab 1内容，但Tab 2标记为活动.... 花了好几个小时之后，我的头在旋转，我可能不得不放弃，但这将是一个很好的黑客。如果我很幸运，那里有一些（很多？）比我聪明的人。其他方法也欢迎......

为有兴趣尝试的人提供链接：http://jsfiddle.net/moonworker/qnna248z/3/

小提琴在第二个标签上有内容仅用于说明，在实际情况下它是空的。

第一个标签：粉红色内容，第二个标签：白色内容，第三个标签：黄色内容

Mimic Jquery ui Tab改变

0 个答案: