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

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

1 个答案: