Sebastian Plasschaert Sebastian Plasschaert - 4 months ago 39
Javascript Question

Materialize Tabs suddenly doesn't work anymore

I'm using the Tabs Javascipt from Materialize in several Rails projects. But suddenly in my last project it doesn't work any-more (it did work some commits ago, but I can't seem to solve it).

I've added a demo-snippet (the one from Materialize, including the intitializer) to a blank page to see if it's page related, but also on this page (controlled by a different controller) it doesn't seem to work.

It's just showing the content in 1 list, doesn't show the activated bar and when clicking it, it jumps to div within the list of content.

Here's my simple About page:

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


...and here's the link to the page:
About Page

Can anyone help me out to solve this? (I'm probably overlooking something simple)

Answer

For me it seems that you have forgotten to add jQuery & materialize JavaScript libraries.

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

Both examples:

  1. codepen
  2. StackOverflow one below

works. Make sure that you add jQuery before Materialize.

$(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>

Good luck mate ;)