2 mylogic mylogic 于 2014.09.10 14:56 提问

jqueryUI tab标签页的增加与切换问题

请教各位:我想通过点击不同的按钮或超链接, 添加一个tab,每个tab都不一样(可以是id不一样),如果tab已经存在,直接切换到该tab页,否则就增加tab并激活。
如下是我的思路,问题不知道出在哪里,请大侠帮我,不知道哪里脑残了,后面为什么index总是-1?所以我点链接总是切换不回已经打开过的tab页上

    /* -----------------初始化 tabs--------------- */
        var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";

        var tabs = $("#tabs").tabs();//初始化tab页
        // tab关闭图标的关闭事件
        tabs.delegate("span.ui-icon-close", "click", function () {
            var panelId = $(this).closest("li").remove().attr("aria-controls");
            $("#" + panelId).remove();
            tabs.tabs("refresh");
        });
   /* ------------------------- 切换(增加)tab页 --------------------- */
        function openTab(tabLabel,id) {

            var id = "tabs-" + id,//生成tab页的id
              li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, tabLabel)),
              tabContentHtml = tabContent.val() || "Tab " + tabLabel + " content.",
              existing = tabs.find("[id='" + id + "']");
            if (existing.length == 0) {
                tabs.find(".ui-tabs-nav").append(li);
                tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
                tabs.tabs("refresh");
            }
            existing = tabs.find("[id='" + id + "']");
            var index = tabs.find(".ui-tabs-nav li").index(existing);//不知道哪里脑残了,为什么index总是-1?
            tabs.tabs("option", "active", index);
        }
 /*-------------------为某超链接绑定的点击事件---------------*/
       $("#menu li").click(function (e) {
            openTab(this.innerText, this.id);//用超链接的文字作为tab页标题,id用来生成tab页的id
        });

问题已经解决,这应该属于jqueryUI(1.10以上) 本身的问题,偶然在Stack Overflow网站上看到的,貌似国内的论坛秀技巧和转载教程的多,很多棘手的现实小问题都不屑于去解决啊。分享一下问题解决链接:http://stackoverflow.com/questions/14859281/select-tab-by-name-in-jquery-ui-1-10-0/14863843

2个回答

u010926521
u010926521   2014.11.26 19:28

这个最后怎么解决的?大神!求指导!

u010926521
u010926521   2014.11.26 19:28

这个最后怎么解决的?大神!求指导!

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!