gpt4 book ai didi

html - MaterializeCSS 无法按预期工作 -> JavaScript 缺失?

转载 作者:行者123 更新时间:2023-12-04 10:48:48 25 4
gpt4 key购买 nike

我尝试使用 materialize.css 库。我在 CDN 中使用了 HTML 设置并在里面复制了一个导航栏 ( https://materializecss.com/getting-started.html )

<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

<nav class="nav-extended">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab"><a href="#test1">Test 1</a></li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
</ul>
</div>
</nav>


<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>

<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>


不是胺化,“Test1”和“Test2”都显示出来。我想缺少一些东西,因为我没有收到任何错误。有谁知道如何做到这一点?

最佳答案

我可以看到您正在尝试在导航栏中使用选项卡。所以,你错过了两件事:

  • JQuery CDN 链接
  • 初始化

  • 你必须引用这个文档来实现选项卡: https://materializecss.com/tabs.html

    codepen 中的演示: https://codepen.io/Bibeva/pen/KKwyqre

    最终代码:
    <!DOCTYPE html>
    <html>

    <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>

    <body>

    <nav class="nav-extended">
    <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    </div>
    <div class="nav-content">
    <ul class="tabs tabs-transparent">
    <li class="tab"><a href="#test1">Test 1</a></li>
    <li class="tab"><a class="active" href="#test2">Test 2</a></li>
    </ul>
    </div>
    </nav>


    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>

    <!--JavaScript at end of body for optimized loading-->
    <!-- Jquery CDN Newly Added -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <!-- Initialization Newly Added -->
    <script>
    $(document).ready(function () {
    $('.tabs').tabs();
    });
    </script>
    </body>

    </html>

    关于html - MaterializeCSS 无法按预期工作 -> JavaScript 缺失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59576270/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com