Javascript 具体化选项卡

我正在尝试在我的网站中使用materialize标签，但它根本不起作用。请帮助我，我犯了什么错误

<div class="container z-depth-4 storeLocation">
    <div class="row hr-top">
         <div class="col s12 m12 l12">
             <h4>Today's menu</h4>
         </div>
    </div>

  <div class="row">
      <div class="col s12 m12 l12">

          <ul id="tabs-swipe-demo" class="tabs">
            <li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
            <li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
            <li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
          </ul>
     <div id="test-swipe-1" class="col s12 blue">Test 1</div>
     <div id="test-swipe-2" class="col s12 red">Test 2</div>
     <div id="test-swipe-3" class="col s12 green">Test 3</div>
     </div>
  </div>
</div> <!-- main container div -->
<script type="text/javascript">
   $(document).ready(function(){
    $('.tabs').tabs();
  });
</script>

今天的菜单





测试1
测试2
测试3
$（文档）.ready（函数（）{
$（'.tabs'）.tabs（）；
});

---

我猜你没有在应用程序中包含jQuery。请参考下面的JSFIDLE

[https://jsfiddle.net/Gaurav_Kumar_Rana/fe5tg97x/4/][1]

我想你没有包括jquery没有我在页脚部分包括了jquery请检查我在这里解决了你的问题。在material之前将jquery添加到你的应用程序顶部。js谢谢兄弟，你能告诉我它不起作用的原因吗。我听说在页面底部添加脚本是一种很好的做法。如果您喜欢我的答案，请解决您的问题。请接受。