javascript - 物化标签在 Laravel 中不起作用

问题描述

我一直在 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>

这是我的标签代码

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

在 Google Chrome 的控制台中，我得到了“我是 3”、“我是 4”和“我是 5”我试图替换文件末尾的脚本标签但没有用:(我还使用了Materialize Dropdown JS并且工作得很好......有什么想法吗？

并提前感谢大家

标签： javascriptjquerylaravelmaterialize

javascript - 物化标签在 Laravel 中不起作用

问题描述

解决方案

推荐阅读