Materialize-CSS Navbar，其选项卡在Electron上不起作用

Navbar 中的 Tab 在 Electron 中使用 Materialize-CSS 不起作用。选项卡不会更改，并且其内容未正确显示。

有些代码只是从模板或文档页面复制和粘贴，我正在使用 Electron 学习 JS 和 HTML。

https://codepen.io/anon/pen/eyVQKx

<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!--Diz ao Electron que o App é optimizado para várias telas-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Whiteflag's Developer Tools</title>
        <!--Importando Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Importando materialize.css-->
        <link type="text/css" rel="stylesheet" 
        href="./assets/materialize-css/css/materialize.min.css"  media="screen,projection"/>
        <!-- Script Requerido antes de Importar Scripts  -->
        <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
            <!-- Importando Scripts -->
            <script src="./assets/jquery/dist/jquery.min.js"></script>                
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
            crossorigin="anonymous"></script>
            <script> require('./renderer.js'); </script>
            <script type="text/javascript" src="./assets/materialize-css/js/materialize.min.js"></script>
            <script> window.$ = window.jQuery = require('./assets/jquery/dist/jquery.min.js');</script>
            <script> window.Hammer = require('./assets/hammer/hammer.min.js');</script>
        <!-- Script Requerido depois de Importar Scripts -->
        <script>if (window.module) module = window.module;</script>
    </head>
    <!-- Navbar do aplicativo, componente do MaterializeCSS -->
    <div class="navbar-fixed">
        <nav class="nav-extended" id="navbar">
            <div class="nav-wrapper">
                <a href="#" class="brand-logo center">Developer Tools</a>
            </div>
            <div class="nav-content" id="navbarcontent">
                <ul class="tabs tabs-transparent tabs-fixed-width" id="tabs">
                <li class="tab"><a href="#test1">Test 1</a></li>
                <li class="tab"><a class="active" href="#test2">Test 2</a></li>
                <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
                <li class="tab"><a href="#test4">Test 4</a></li>
                </ul>
            </div>
        </nav>
    </div>
      <div id="test1" class="col s12">Test 1</div>
      <div id="test2" class="col s12">Test 2</div>
      <div id="test3" class="col s12">Test 3</div>
      <div id="test4" class="col s12">Test 4</div>

库和 CSS 文件中没有修改。

谢谢。等待响应。

我已经更新了你的代码笔https://codepen.io/anon/pen/WgKwje

如果你想让它与电子一起工作。

npm install materialize-css@next

然后在索引中包含具体化 CSS 和 JS.html在正文标记调用 M.AutoInit(( 的末尾

<script>M.AutoInit();</script>

相关内容

最新更新

热门标签：