2014-03-28 193 views
0

我在這裏是新的,並沒有找到我的問題的解決方案。 我搜索了網頁,並嘗試了大量的解決方案,但他們沒有工作。JQuery選項卡,不能更改激活選項卡

使用jQuery標籤與關閉的功能(http://jsfiddle.net/42er3/9/

現在我想激活最新創建的選項卡。這doesn't工作^^

這裏是我的代碼:

$(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 = 1; 
    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: { 
      Send: 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 = tabTitle.val(), 
      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 + "' class='rel'><p>" + tabContentHtml + "</p><hr /><div id='writebox'><form name='send' id ='sent'><textarea name ='msg' class='boxsizingBorder'></textarea><input type='submit' name='" + id + "' /></form></div></div>"); 

     //after added the tab, active it 
     tabs.tabs({ 
      active: tabCounter 
     }); // <---------------------------Here it is 

     //alert(panelId+"-"+tabCounter); 
     tabCounter++; 
     tabs.tabs("refresh"); 

    } 
    // 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"); 
     } 
    }); 
}); 
+0

你的意思,你添加你想要它成爲活躍的標籤? –

+0

是的,我想成爲它的活躍 – Itempas

回答

0

您可以使用下面的代碼以編程方式做出積極標籤

$("#tabs").tabs("option", "active", 2); 

我已經更新了addTab()方法在你的小提琴如下:

function addTab() { 
    ... 
    tabs.tabs("refresh"); 
    tabs.tabs("option", "active", tabCounter-1); 
    tabCounter++; 
} 

由於選項卡索引從0開始而不是1,我不得不從012減以獲取剛剛添加的選項卡的索引。

的演示中看到here

相關問題