Javascript 具体化选项卡是'；他在拉威尔工作_Javascript_Jquery_Laravel_Materialize

Javascript 具体化选项卡是'；他在拉威尔工作

javascript jquery laravel

Javascript 具体化选项卡是'；他在拉威尔工作,javascript,jquery,laravel,materialize,Javascript,Jquery,Laravel,Materialize,我在Laravel从事一个项目，我使用Materialize作为前端框架！我的问题是Materialize.js文件和jQuery-3.3.1.min.js，两者都不起作用，我添加了console.log（）函数以确保代码在两者上都不起作用这是我的app.blade.php文件 <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head>

我在Laravel从事一个项目，我使用Materialize作为前端框架！我的问题是

Materialize.js

文件和

jQuery-3.3.1.min.js

，两者都不起作用，我添加了

console.log（）

函数以确保代码在两者上都不起作用

这是我的

app.blade.php

文件

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'E-Commerce Test') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/materialize.js') }}" defer>
        console.log("I am 1");  
    </script>
    <script src="{{ asset('js/jquery-3.3.1.min.js') }}" defer>
        $(document).ready(function(){
        $('.tabs').tabs();
        console.log("I am 2");
  });
    </script>
    <script>
        console.log("I am 3");
    </script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <style type="text/css">
        @font-face {
            font-family: Indie Flower, cursive;
            src: url('{{ public_path('/public/fonts/IndieFlower.ttf') }}');
        }
    </style>
    <link href="{{ asset('css/materialize.css') }}" rel="stylesheet">
    <link href="{{ asset('css/costume.css') }}" rel="stylesheet">



</head>
<body>
    @include('inc.navbar')
    <div id="app">

        <main class="py-4">
            @yield('content')
        </main>
    </div>
    @include('inc.footer')

    <script src="{{ asset('js/materialize.js') }}" defer>
        console.log("I am 1");  
    </script>
    <script src="{{ asset('js/jquery-3.3.1.min.js') }}" defer>
        $(document).ready(function(){
        $('.tabs').tabs();
        console.log("I am 2");
  });
      </script>

    <script>
        console.log("I am 4");
        document.addEventListener('DOMContentLoaded', function() {
            options ={};
            var elems = document.querySelectorAll('.dropdown-trigger');
            var instances = M.Dropdown.init(elems, options);
  });
    </script>

    <script>
        console.log("I am 5");
    </script>


</body>
</html>


{{config（'app.name'，'E-Commerce Test'）}
console.log（“我是1”）；
$（文档）.ready（函数（）{
$（'.tabs'）.tabs（）；
console.log（“我是2”）；
});
控制台日志（“我是3”）；
@字体{
字体系列：独立花，草书；
src:url（{{public_path（'/public/fonts/IndieFlower.ttf'）}}）；
}
@包括（'inc.navbar'）
@产量（‘含量’）
@包括（'inc.footer'）
console.log（“我是1”）；
$（文档）.ready（函数（）{
$（'.tabs'）.tabs（）；
console.log（“我是2”）；
});
console.log（“我4岁”）；
document.addEventListener（'DOMContentLoaded'，function（）{
选项={}；
var elems=document.querySelectorAll（'.dropdownttrigger'）；
var实例=M.Dropdown.init（元素，选项）；
});
console.log（“我5岁”）；

这是我的标签代码

<div class="row">
        <div class="col s12">
            <ul class="tabs">
                <li class="tab"><a href="#winter">Winter</a></li>
                <li class="tab"><a href="#summer">Summer</a></li>
                <li class="tab"><a href="#sports">Sports</a></li>
                <li class="tab"><a href="#cos">Costumized</a></li>
                <li class="tab"><a href="#cla">Classic</a></li>
                <li class="tab"><a href="#tra">Traditional</a></li>
            </ul>
        </div>
        <div class="col s12" id="winter">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
        <div class="col s12" id="summer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
        <div class="col s12" id="sports">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
        <div class="col s12" id="cos">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
        <div class="col s12" id="cla">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
        <div class="col s12" id="tra">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
    </div>










我的同僚们都是精英。
Molestiae quo porro，doloribus nulla，
比阿特律师事务所的律师资格，
埃尼姆·阿特克·阿苏门达·奎斯奎姆。
尤拉姆圣发明家教堂！
我的同僚们都是精英。
Molestiae quo porro，doloribus nulla，
比阿特律师事务所的律师资格，
埃尼姆·阿特克·阿苏门达·奎斯奎姆。
尤拉姆圣发明家教堂！
我的同僚们都是精英。
Molestiae quo porro，doloribus nulla，
比阿特律师事务所的律师资格，
埃尼姆·阿特克·阿苏门达·奎斯奎姆。
尤拉姆圣发明家教堂！
我的同僚们都是精英。
Molestiae quo porro，doloribus nulla，
比阿特律师事务所的律师资格，
埃尼姆·阿特克·阿苏门达·奎斯奎姆。
尤拉姆圣发明家教堂！
我的同僚们都是精英。
Molestiae quo porro，doloribus nulla，
比阿特律师事务所的律师资格，
埃尼姆·阿特克·阿苏门达·奎斯奎姆。
尤拉姆圣发明家教堂！
我的同僚们都是精英。
Molestiae quo porro，doloribus nulla，
比阿特律师事务所的律师资格，
埃尼姆·阿特克·阿苏门达·奎斯奎姆。
尤拉姆圣发明家教堂！

在谷歌Chrome的控制台上，我得到了“我3岁”、“我4岁”和“我5岁” 我试图替换文件末尾的脚本标记，但没有用：（我还使用JS使用了Materialize下拉列表，效果很好……有什么想法吗

提前感谢大家
你不会把js标记放在页脚附近而不是页眉附近吧。我想你提到过，但还是这样做了。然后在你的materialize js之前加载jquery。之后，查看你的控制台日志，直到它说的一样：/！没什么变化！！！在你的材料Javascript之前加载jquery尝试使用一些标准，在文件的底部加载js文件。在顶部加载jquery。删除jquery延迟。删除脚本src中的代码！如果你想在控制台中打印任何内容，请打开新脚本标记感谢各位的帮助…我让选项卡工作，但使用的是JavaScript而不是jquery…尽管如果给出答案，那将令人惊讶！