Javascript 打开新选项卡时，应在jquery ui选项卡中直接打开新选项卡

我正在使用jquery UI创建动态选项卡面板。当我单击“添加选项卡”按钮时，新选项卡正在创建中。但该选项卡面板并没有直接打开。当单击该选项卡面板时，只有它处于打开状态

 $(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" );
  }
});

$（函数（）{
var tabTitle=$（“#tab_title”），
tabContent=$（“#tab_内容”），
tabTemplate=“
删除选项卡”
，
tabCounter=2；
var tabs=$（“#tabs”）.tabs（）；
//模态对话框初始化：自定义按钮和“关闭”回调重置表单内部
变量对话框=$（“#对话框”）。对话框({
自动打开：错误，
莫代尔：是的，
按钮：{
添加：函数（）{
addTab（）；
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
},
关闭：函数（）{
表单[0]。重置（）；
}
});
//addTab表单：在提交时调用addTab函数并关闭对话框
var form=dialog.find（“form”）.submit（函数（事件）{
addTab（）；
dialog.dialog（“关闭”）；
event.preventDefault（）；
});
//实际addTab函数：使用上面表单中的输入添加新选项卡
函数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（“”+tabContentHtml+”
”）；
制表符。制表符（“刷新”）；
tabCounter++；
}
//addTab按钮：只需打开对话框
$（“#添加#选项卡”）
.按钮（）
。单击（函数（）{
dialog.dialog（“打开”）；
});
//关闭图标：单击删除选项卡
tabs.delegate（“span.ui图标关闭”，“单击”，函数（）{
var panelId=$（this.closest（“li”）.remove（）.attr（“aria控件”）；
$（“#”+panelId）.remove（）；
制表符。制表符（“刷新”）；
});
tabs.bind（“键控”），函数（事件）{
if（event.altKey&&event.keyCode===$.ui.keyCode.BACKSPACE）{
var panelId=tabs.find（“.ui-tabs-active”）.remove（）.attr（“aria-controls”）；
$（“#”+panelId）.remove（）；
制表符。制表符（“刷新”）；
}
});

}))

这是我在我的网站[]中使用的jquery UI选项卡面板的url

---

如何直接打开这个新添加的选项卡？

在addTab（）函数中添加以下代码

这样做的目的是获取选项卡列表最后一个子项（您刚刚添加的子项）的索引，并将其设置为活动

例如：

---

编辑：鉴于您的代码中已经有一个tabCounter，您可以使用它作为设置最后一个活动选项卡的索引，而不是我建议的var lastChildIndex。

在打开选项卡时有两件事需要修改，第一个选项卡类需要添加新创建的选项卡，并从当前活动选项卡中删除活动类，并在选项卡内容中应用css，例如作为display:block-when-activeI添加了上述代码。现在它工作正常。谢谢

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