javascript - 如何使用 MaterializeCSS 框架和 Javascript 动态创建选项卡？

Question

我正在使用materializecss.com。任何帮助表示赞赏!我希望它就像，当有人单击按钮时，它会动态创建一个新选项卡，然后将用户移动到该选项卡。但是，我在完成这项工作时遇到了问题(我的代码现在毫无值(value))。我该怎么做？

谢谢!

代码:

 <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