beim Öffnen neuer Tabs, sollte es den neuen Tab direkt in jquery öffnen ui Tabs

Question

Ich benutze jquery-UI für die Erstellung von dynamischen Registerkarte panel.wenn ich auf Hinzufügen Tab-Taste klicken, wird der neue Tab zu schaffen. aber diese Registerkarte wird nicht direkt geöffnet. Wenn Sie auf dieses Registerfeld klicken, wird nur geöffnet.

$(function() { 
var tabTitle = $("#tab_title"), 
    tabContent = $("#tab_content"), 
    tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", 
    tabCounter = 2; 

var tabs = $("#tabs").tabs(); 

// modal dialog init: custom buttons and a "close" callback resetting the form inside 
var dialog = $("#dialog").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
    Add: function() { 
     addTab(); 
     $(this).dialog("close"); 
    }, 
    Cancel: function() { 
     $(this).dialog("close"); 
    } 
    }, 
    close: function() { 
    form[ 0 ].reset(); 
    } 
}); 

// addTab form: calls addTab function on submit and closes the dialog 
var form = dialog.find("form").submit(function(event) { 
    addTab(); 
    dialog.dialog("close"); 
    event.preventDefault(); 
}); 

// actual addTab function: adds new tab using the input from the form above 
function addTab() { 
    var label = tabTitle.val() || "Tab " + tabCounter, 
    id = "tabs-" + tabCounter, 
    li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), 
    tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content."; 

    tabs.find(".ui-tabs-nav").append(li); 
    tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>"); 
    tabs.tabs("refresh"); 
    tabCounter++; 
} 

// addTab button: just opens the dialog 
$("#add_tab") 
    .button() 
    .click(function() { 
    dialog.dialog("open"); 
    }); 

// close icon: removing the tab on click 
tabs.delegate("span.ui-icon-close", "click", function() { 
    var panelId = $(this).closest("li").remove().attr("aria-controls"); 
    $("#" + panelId).remove(); 
    tabs.tabs("refresh"); 
}); 

tabs.bind("keyup", function(event) { 
    if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) { 
    var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls"); 
    $("#" + panelId).remove(); 
    tabs.tabs("refresh"); 
    } 
}); 

});

Hier ist die URL für jquery UI Registerkarte Panel, die ich in meiner Website verwendet habe [http://jqueryui.com/tabs/#manipulation].

Wie öffnet man diese neu hinzugefügte Registerkarte?

Answer 1

add folgenden Code in Ihr addTab() Funktion

var lastChildIndex = $(".ui-tabs-nav").children().length - 1; 
    $("div#tabs").tabs({active: lastChildIndex}); 

Was dies tut, ist es den Index des letzten Kindes Ihrer Tabs Liste bekommt (die Sie gerade hinzugefügt haben) und setzt es auf aktiv.

Beispiel: http://jsfiddle.net/ujUu2/818/

EDIT: Sehen, wie Sie bereits einen tabCounter in Ihrem Code haben Sie, dass als Index für die Einstellung der letzten Reiter aktiv anstelle des var lastChildIndex verwenden kann ich vorgeschlagen.