MaterializeCSS未按预期工作 -> JavaScript缺失？

huangapple
go评论108阅读模式
英文:

MaterializeCSS does not work as expected -> JavaScript Missing?

问题

I try to use the materialize.css library. I used the HTML setup with the CDN and copied a navbar inside (https://materializecss.com/getting-started.html)






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


  1. <nav class="nav-extended">
  2.   <div class="nav-wrapper">
  3.     <a href="#" class="brand-logo">Logo</a>
  4.     <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
  5.   </div>
  6.   <div class="nav-content">
  7.     <ul class="tabs tabs-transparent">
  8.       <li class="tab"><a href="#test1">Test 1</a></li>
  9.       <li class="tab"><a class="active" href="#test2">Test 2</a></li>
  10.     </ul>
  11.   </div>
  12. </nav>
  14. <div id="test1" class="col s12">Test 1</div>
  15. <div id="test2" class="col s12">Test 2</div>
  17. <!--JavaScript at end of body for optimized loading-->
  18. <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>



The are not aminations, both "Test1" and "Test2" get displayed. I guess there is something missing, because I get no error. Does anyone know how to do this?

英文:

I try to use the materialize.css library. I used the HTML setup with the CDN and copied a navbar inside (https://materializecss.com/getting-started.html)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2.     &lt;html&gt;
  3.       &lt;head&gt;
  4.         &lt;!--Import Google Icon Font--&gt;
  5.         &lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot;&gt;
  6.         &lt;!--Import materialize.css--&gt;
  7.         &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css&quot;&gt;
  8.     
  9.         &lt;!--Let browser know website is optimized for mobile--&gt;
  10.         &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;/&gt;
  11.       &lt;/head&gt;
  12.       &lt;body&gt;
  13.     
  14.         &lt;nav class=&quot;nav-extended&quot;&gt;
  15.           &lt;div class=&quot;nav-wrapper&quot;&gt;
  16.             &lt;a href=&quot;#&quot; class=&quot;brand-logo&quot;&gt;Logo&lt;/a&gt;
  17.             &lt;a href=&quot;#&quot; data-target=&quot;mobile-demo&quot; class=&quot;sidenav-trigger&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;menu&lt;/i&gt;&lt;/a&gt;
  18.           &lt;/div&gt;
  19.           &lt;div class=&quot;nav-content&quot;&gt;
  20.             &lt;ul class=&quot;tabs tabs-transparent&quot;&gt;
  21.               &lt;li class=&quot;tab&quot;&gt;&lt;a href=&quot;#test1&quot;&gt;Test 1&lt;/a&gt;&lt;/li&gt;
  22.               &lt;li class=&quot;tab&quot;&gt;&lt;a class=&quot;active&quot; href=&quot;#test2&quot;&gt;Test 2&lt;/a&gt;&lt;/li&gt;
  23.             &lt;/ul&gt;
  24.           &lt;/div&gt;
  25.         &lt;/nav&gt;
  26.     
  27.       
  28.         &lt;div id=&quot;test1&quot; class=&quot;col s12&quot;&gt;Test 1&lt;/div&gt;
  29.         &lt;div id=&quot;test2&quot; class=&quot;col s12&quot;&gt;Test 2&lt;/div&gt;
  30.     
  31.         &lt;!--JavaScript at end of body for optimized loading--&gt;
  32.         &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js&quot;&gt;&lt;/script&gt;
  33.       &lt;/body&gt;
  34.     &lt;/html&gt;

<!-- end snippet -->

The are not aminations, both "Test1" and "Test2" get displayed. I guess there is something missing, because I get no error. Does anyone know how to do this?

答案1

得分: 1

我看到你正在尝试在导航栏中使用标签页。所以，你缺少两个东西：

  1. JQuery CDN链接
  2. 初始化

你需要参考这个文档来实现标签页：https://materializecss.com/tabs.html

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

最终代码：

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <!-- 导入 Google 图标字体 -->
  6.   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  7.   <!-- 导入 materialize.css -->
  8.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  10.   <!-- 让浏览器知道该网站已优化移动设备 -->
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  12. </head>
  14. <body>
  16.   <nav class="nav-extended">
  17.     <div class="nav-wrapper">
  18.       <a href="#" class="brand-logo">Logo</a>
  19.       <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
  20.     </div>
  21.     <div class="nav-content">
  22.       <ul class="tabs tabs-transparent">
  23.         <li class="tab"><a href="#test1">Test 1</a></li>
  24.         <li class="tab"><a class="active" href="#test2">Test 2</a></li>
  25.       </ul>
  26.     </div>
  27.   </nav>
  29.   <div id="test1" class="col s12">Test 1</div>
  30.   <div id="test2" class="col s12">Test 2</div>
  32.   <!-- 在页面底部加载 JavaScript 以优化加载 -->
  33.   <!-- 新添加的 Jquery CDN 链接 -->
  34.   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  35.   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  36.   <!-- 新添加的初始化 -->
  37.   <script>
  38.     $(document).ready(function () {
  39.       $('.tabs').tabs();
  40.     });
  41.   </script>
  42. </body>
  44. </html>

希望对你有所帮助。

英文:

I can see you are trying to use tab in navbar. So, you are missing 2 things:

  1. JQuery CDN link
  2. Initialization

You have to refer to this documentation to implement tab: https://materializecss.com/tabs.html

Demo in codepen: https://codepen.io/Bibeva/pen/KKwyqre

Final code:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;!--Import Google Icon Font--&gt;
  5. &lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot;&gt;
  6. &lt;!--Import materialize.css--&gt;
  7. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css&quot;&gt;
  8. &lt;!--Let browser know website is optimized for mobile--&gt;
  9. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  10. &lt;/head&gt;
  11. &lt;body&gt;
  12. &lt;nav class=&quot;nav-extended&quot;&gt;
  13. &lt;div class=&quot;nav-wrapper&quot;&gt;
  14. &lt;a href=&quot;#&quot; class=&quot;brand-logo&quot;&gt;Logo&lt;/a&gt;
  15. &lt;a href=&quot;#&quot; data-target=&quot;mobile-demo&quot; class=&quot;sidenav-trigger&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;menu&lt;/i&gt;&lt;/a&gt;
  16. &lt;/div&gt;
  17. &lt;div class=&quot;nav-content&quot;&gt;
  18. &lt;ul class=&quot;tabs tabs-transparent&quot;&gt;
  19. &lt;li class=&quot;tab&quot;&gt;&lt;a href=&quot;#test1&quot;&gt;Test 1&lt;/a&gt;&lt;/li&gt;
  20. &lt;li class=&quot;tab&quot;&gt;&lt;a class=&quot;active&quot; href=&quot;#test2&quot;&gt;Test 2&lt;/a&gt;&lt;/li&gt;
  21. &lt;/ul&gt;
  22. &lt;/div&gt;
  23. &lt;/nav&gt;
  24. &lt;div id=&quot;test1&quot; class=&quot;col s12&quot;&gt;Test 1&lt;/div&gt;
  25. &lt;div id=&quot;test2&quot; class=&quot;col s12&quot;&gt;Test 2&lt;/div&gt;
  26. &lt;!--JavaScript at end of body for optimized loading--&gt;
  27. &lt;!-- Jquery CDN Newly Added --&gt;
  28. &lt;script src=&quot;https://code.jquery.com/jquery-2.2.4.min.js&quot; integrity=&quot;sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  29. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js&quot;&gt;&lt;/script&gt;
  30. &lt;!-- Initialization Newly Added --&gt;
  31. &lt;script&gt;
  32. $(document).ready(function () {
  33. $(&#39;.tabs&#39;).tabs();
  34. });
  35. &lt;/script&gt;
  36. &lt;/body&gt;
  37. &lt;/html&gt;

答案2

得分: 1

你需要正确使用 tab 类，请尝试以下代码：

  1. <!-- language: lang-css -->
  2. .tab a{
  3.   color:#bbb !important;
  4. }
  5. .tab a.active{
  6.   color:#eee !important;
  7. }
  9. <!-- language: lang-html -->
  10. <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
  14. <div class="row ">
  15.     <div class="col s12">
  16.       <ul class="tabs red lighten-1">
  17.         <li class="tab col s3"><a href="#test1">Test 1</a></li>
  18.         <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
  19.         <li class="tab col s3"><a href="#test3">Test 3</a></li>
  20.       </ul>
  21.     </div>
  22.     <div id="test1" class="col s12">Test 1</div>
  23.     <div id="test2" class="col s12">Test 2</div>
  24.     <div id="test3" class="col s12">Test 3</div>
  25. </div>

这是你提供的代码的翻译部分。

英文:

You have to use tab class properly, try the below code

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .tab a{
  2. color:#bbb !important;
  3. }
  4. .tab a.active{
  5. color:#eee !important;
  6. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  2. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js&quot;&gt;&lt;/script&gt;
  4. &lt;div class=&quot;row &quot;&gt;
  5. &lt;div class=&quot;col s12&quot;&gt;
  6. &lt;ul class=&quot;tabs red lighten-1&quot;&gt;
  7. &lt;li class=&quot;tab col s3&quot;&gt;&lt;a href=&quot;#test1&quot;&gt;Test 1&lt;/a&gt;&lt;/li&gt;
  8. &lt;li class=&quot;tab col s3&quot;&gt;&lt;a class=&quot;active&quot; href=&quot;#test2&quot;&gt;Test 2&lt;/a&gt;&lt;/li&gt;
  9. &lt;li class=&quot;tab col s3&quot;&gt;&lt;a href=&quot;#test3&quot;&gt;Test 3&lt;/a&gt;&lt;/li&gt;
  10. &lt;/ul&gt;
  11. &lt;/div&gt;
  12. &lt;div id=&quot;test1&quot; class=&quot;col s12&quot;&gt;Test 1&lt;/div&gt;
  13. &lt;div id=&quot;test2&quot; class=&quot;col s12&quot;&gt;Test 2&lt;/div&gt;
  14. &lt;div id=&quot;test3&quot; class=&quot;col s12&quot;&gt;Test 3&lt;/div&gt;
  15. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月3日 17:46:32
  • 转载请务必保留本文链接：https://go.coder-hub.com/59576270.html
  • css
  • html
  • materialize
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定