Jquery-UI-Tab的ID是否改變？

Question

我需要一些幫助......我做了如下：

<div class="tabs"> 
    <ul> 
    <li><a id="tb-1" position=1 href="tabs-1"> A </a></li> 
    <li><a id="tb-2" position=2 href="tabs-2"> B </a></li> 
    <li><a id="new-tab" position=3 href="new-tab"> + </a></li> 
    </ul> 

    <div id="tabs-1"> ... some html...</div> 
    <div id="tabs-2"> ... some html...</div> 
    <div id="new-tab"></div> 
</div> 

所以...一款擁有寫的JS代碼：

$(".tabs").tabs(); 

$("#new-tab").click(function(event) { 

    // new tab position 
    var position = $(this).attr("position"); 

    // change ID of "new-tab" tab to "tb-X" 
    $('#new-tab').attr("id", "tb-"+position); 

    // title of current tab 
    $("#tb-"+position).html("NEW"); 

    // add <div> to the new tab 
    $(".tabs").append("<div id=\"tabs-"+position+"\"></div>"); 

    // add some html to the tab (not realy the above code) 
    $("#tabs-"+position).html(new_data); 

    // add new tab to tabs    
    var url = "#tabs-"+(position*1+1); 
    $(".tabs").tabs("add", url, "+"); 

    // insert ID "new-tab" to the added tab 
    $('.tabs li a').eq(position).attr("id", "new-tab"); 

    ... some more stuffs 

之後，結果似乎是完美的..但是.. 。

• 點擊[+]標籤中，一個新的標籤被添加...確定

• 點擊AGA在[+]中（這是最近添加的標籤）沒有任何事情

• 單擊[NEW]選項卡，它會再次創建一個新選項卡！ （[新]選項卡是老[+]選項卡）

檢查代碼，[+]選項更改爲新值的ID ......一切似乎是確定。

出了什麼問題？

我希望我的英語很清楚！非常感謝！

Answer 1

這是一個更新。

現在，我瞭解jQuery選項卡控件，我認爲這正是你要做的。順便說一句很酷的主意。

的jsfiddle：

http://jsfiddle.net/54WZH/5/

HTML

<div class="tabs"> 
    <ul> 
    <li><a href="tabs-1"> A </a></li> 
    <li><a href="tabs-2"> B </a></li> 
    </ul> 
</div> 

的JavaScript

var $tbs = $(".tabs"); 
$tbs.tabs().children("ul").append('<li><a id="new-tab" class="ui-state-default ui-corner-top"> + </a></li>'); 

$("#new-tab").click(function(event) { 

    //Need to remove our Plus button so it doesn't get counted when 
    //calling tabs("add",...) 
    $(this).parent().remove(); 

    //Get the position of the new tab 
    var pos = $tbs.find(" > ul > li:last").index() + 2; 

    //Insert the new tab & re-add the Plus button 
    $tbs.tabs("add", "#ui-tabs-" + pos, "New").children("ul").append('<li><a id="new-tab" class="ui-state-default ui-corner-top"> + </a></li>'); 

    //Your dynamic tab content for this tab 
    $("#ui-tabs-" + pos).html("Content-" + pos); 

    //Re-add the event for the Plus Button 
    $("#new-tab").click(arguments.callee); 
});