Materialize-CSS Navbar,标签不在Electron上

问题描述 投票:1回答:1

使用Electron-CSS in Electron的Navbar中的选项卡不起作用。选项卡不会更改,其内容无法正确显示。

有些代码只是从模板或文档页面复制和粘贴,我正在使用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文件中没有修改。

谢谢。等待回应。

javascript html css electron materialize
1个回答
1
投票

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

如果你想让它与电子一起使用。

npm install materialize-css@next

然后在body标签调用M.AutoInit()的末尾在index.html中包含materialize css和js

<script>M.AutoInit();</script>
© www.soinside.com 2019 - 2024. All rights reserved.