Materialize css tabs are not working
<p>I am making profile ui for mobile. I am using materialize css for that.. But in my case it's not working. I mean the tabs are not working.</p>

<p>So here is the code.</p>

<p><a href="http://codepen.io/anon/pen/VmmJWv" rel="nofollow noreferrer">http://codepen.io/anon/pen/VmmJWv</a></p>

<p>html:</p>

<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;

  &lt;!-- Compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"&gt;

  &lt;!-- Compiled and minified JavaScript --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"&gt;&lt;/script&gt;

  &lt;title&gt;Profile&lt;/title&gt;
  &lt;link rel="stylesheet" href="profile.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="nav"&gt;

&lt;/div&gt;
&lt;div class="profile"&gt;

&lt;div class="cover-img"&gt;
&lt;img id="cover-img" src="https://cdn2.xyztimes.com/wp-content/uploads/2015/05/Material-Wallpaper-11.1-696x407.png" width="100%" height="150px" &gt;
&lt;/div&gt;
&lt;div class="profile-meta z-depth-3"&gt;
&lt;div class="profile-img"&gt;
&lt;img id="profile-img" src="http://orig02.deviantart.net/e65e/f/2016/145/0/f/profile_picture_by_the_spooky_man-da3t6n4.png" height="100px" width="100px"&gt;
&lt;/div&gt;

&lt;div class="profile-name"&gt;
&lt;p class="profile-name"&gt;Profile Name&lt;/p&gt;
&lt;/div&gt;
&lt;div class="profile-id"&gt;
&lt;p class="profile-id"&gt;Profile ID&lt;/p&gt;
&lt;/div&gt;
&lt;div class="profile-desc"&gt;
&lt;p class="profile-desc"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sollicitudin lectus, et gravida mauris. &lt;/p&gt;
&lt;/div&gt;
&lt;ul class="profile-stats"&gt;
  &lt;a&gt;&lt;li&gt;&lt;span&gt;1m&lt;/span&gt;Followers&lt;/li&gt;&lt;/a&gt;
  &lt;a&gt;&lt;li&gt;&lt;span&gt;100&lt;/span&gt;Following&lt;/li&gt;&lt;/a&gt;
  &lt;a&gt;&lt;li&gt;&lt;span&gt;758&lt;/span&gt;Posts&lt;/li&gt;&lt;/a&gt;
  &lt;a&gt;&lt;li&gt;&lt;span&gt;84&lt;/span&gt;Helpful&lt;/li&gt;&lt;/a&gt;
&lt;/ul&gt;

&lt;div class="profile-btn"&gt;&lt;a class="waves-effect waves-light btn center-btn purple"&gt;Follow&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;

&lt;div class="row"&gt;
  &lt;div class="col s12"&gt;
    &lt;ul class="tabs"&gt;
      &lt;li class="tab col s3"&gt;&lt;a href="#test1"&gt;Test 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tab col s3"&gt;&lt;a class="active" href="#test2"&gt;Test 2&lt;/a&gt;&lt;/li&gt;

      &lt;li class="tab col s3"&gt;&lt;a href="#test4"&gt;Test 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="test1" class="col s12"&gt;Test 1&lt;/div&gt;
  &lt;div id="test2" class="col s12"&gt;Test 2&lt;/div&gt;

  &lt;div id="test4" class="col s12"&gt;Test 4&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;script&gt;
$(document).ready(function(){
  $('ul.tabs').tabs();
});
$(document).ready(function(){
  $('ul.tabs').tabs('select_tab', 'tab_id');
});

&lt;/script&gt;
</code></pre>

<p>Thanx for the help........</p>