Materialize 탭이 갑자기 작동하지 않습니다.

Question

여러 Rails 프로젝트에서 Materialize의 Tabs Javascipt를 사용하고 있습니다. 하지만 갑자기 내 마지막 프로젝트에서 더 이상 작동하지 않습니다 (일부 커밋 작업이 완료되었지만 해결할 수없는 것처럼 보임).

비어있는 페이지에 데모 스 니펫 (인니 티 나이저를 포함한 Materialize의 스 니펫)을 추가하여 관련 페이지인지,이 페이지 (다른 컨트롤러로 제어 됨)에 보이지 않는지 확인합니다 일하다.

단지 하나의 목록에 콘텐츠를 표시하고 활성화 된 막대를 표시하지 않으며 클릭하면 콘텐츠 목록 내에서 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의

작품 아래 하나. 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>

행운 메이트

)