Materializeタブが突然動かない

Question

複数のRailsプロジェクトでMaterializeのTabs Javasciptを使用しています。しかし、突然、私の最後のプロジェクトでは、それ以上のことはできません（コミット前にはうまくいきましたが、解決できないようです）。

空白のページにデモスニペット（インテロライザーを含む）を追加しました。ページが関連しているかどうかを確認するために、このページ（別のコントローラによって制御されています）働く

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> 

...とここのページへのリンクです：ここで

は、ページについての私の簡単です About Page

誰もこれを解決するために私を助けることはできますか？ （私はおそらく単純なものを見落としているでしょう）

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の1

以下の作品。 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>

幸運メイト;）