В Laravel не работают вкладки материализации - PullRequest
Новая
       8

В Laravel не работают вкладки материализации

0 голосов
/ 07 сентября 2018

Я работал над проектом в Laravel, я использовал Materialize как интерфейсную среду!Моя проблема в файлах Materialize.js и jQuery-3.3.1.min.js, оба не работают, я добавил функцию console.log(), и код даже не работает на обоих ...

Это мойapp.blade.php file 

<!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, и работал нормально ... Любая идеяребята?

И заранее спасибо, ребята

...