如何使用MaterializeCSS框架和Javascript動態創建選項卡？

Question

我正在使用materializecss.com。任何幫助表示讚賞！ 我喜歡它，當有人點擊一個按鈕時，它動態地創建一個新的標籤，然後它將用戶移動到。不過，我在做這項工作時遇到了問題（現在我的代碼毫無價值）。我將如何做到這一點？

謝謝！

代碼：

<div class="row"> 
<div class="col s12"> 
    <ul id="tabs" class="tabs"> 
     <li class="tab col s3"><a href="#test1">Test 1</a></li> 
     <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li> 
     <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li> 
     <li class="tab col s3"><a href="#test4">Test 4</a></li> 
    </ul> 
</div> 
    <div id="tabsCollectionDiv"> 
     <div id="test1" class="col s12">Test 1</div> 
     <div id="test2" class="col s12">Test 2</div> 
     <div id="test3" class="col s12">Test 3</div> 
     <div id="test4" class="col s12">Test 4</div> 
    </div> 
    </div> 




<script> 
    function forwardFunction() 
    { 
     var randTabName = Math.floor((Math.random() * 1000) + 1); 
     $("tabs").append("<li class='tab col s3'><a href='"+randTabName+"'></a></li>"); 
     $("tabsCollectionDiv").append("<div id='"+randTabName+"' class='col s12'>""</div>"); 
     $('ul.tabs').tabs(); 
    } 
</script> 

編輯：鏈接代碼：https://jsfiddle.net/6agmr9e7/1/

Answer 1

這個版本似乎工作得相當好：

function forwardFunction() 
    { 
     var randTabName = Math.floor((Math.random() * 1000) + 1); 
     var $tabs = $('#tabs'); 
     $tabs.children().removeAttr('style');  

     $tabs.append("<li class='tab col s3'><a href='#"+randTabName+"'>New"+randTabName+"</a></li>"); 
     $("#tabsCollectionDiv").append("<div id='"+randTabName+"' class='col s12'>New"+randTabName+"</div>"); 

     // initalize tabs again, then select new tab 
     $tabs.tabs().tabs('select_tab', randTabName); 
    } 

DEMO