Question

在Electron中使用Materialise-CSS的Navbar中的选项卡不起作用。标签不会改变，其内容也无法正确显示。

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

<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文件中没有修改。

感谢。等待回应。

Answer 1

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

如果要使其与电子配合使用。

npm install materialize-css@next

然后在index.html中包含具体化的CSS和JS 在body标签的末尾调用M.AutoInit（）

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

Materialize-CSS Navbar，标签不在Electron上

1 个答案: