物化選項卡突然不再起作用

Question

我在幾個Rails項目中使用了Materialize的Tabs Javascipt。 但是突然在我的上一個項目中它不再起作用了（它確實在一些提交之前起作用了，但是我似乎無法解決）。

我在空白頁上添加了一個演示代碼段（Materialize的代碼，包括intitializer），以查看它是否與頁面相關，但在此頁面上（由其他控制器控制）似乎無效。

它只是在1個列表中顯示內容，不顯示已激活的欄，當單擊它時，它會跳到內容列表中的div。

這是我簡單的“關於”頁面：

<h3>About Us</h3>

<div class="row">
<div class="col s12">
  <ul 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="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>

<script>
$(document).ready(function(){
$('ul.tabs').tabs();
  });
</script>

...這是頁面的鏈接： 關於頁面

誰能幫我解決這個問題？ （我可能忽略了一些簡單的內容）

Answer 1

對我來說，您似乎已經忘記添加jQuery和實現JavaScript庫。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> 

兩個例子：

1. codepen
2. StackOverflow下面的一個

作品。 確保在Materialize之前添加jQuery。

 $(document).ready(function(){ $('ul.tabs').tabs(); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> <div class="row"> <div class="col s12"> <ul 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="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> 

祝你好運;）