英文:
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)
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<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>
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 -->
<!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>
<!-- 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
我看到你正在尝试在导航栏中使用标签页。所以，你缺少两个东西：
- JQuery CDN链接
- 初始化
你需要参考这个文档来实现标签页：https://materializecss.com/tabs.html
在Codepen中的演示：https://codepen.io/Bibeva/pen/KKwyqre
最终代码：
<!DOCTYPE html>
<html>
<head>
<!-- 导入 Google 图标字体 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- 导入 materialize.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- 让浏览器知道该网站已优化移动设备 -->
<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 以优化加载 -->
<!-- 新添加的 Jquery CDN 链接 -->
<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>
<!-- 新添加的初始化 -->
<script>
$(document).ready(function () {
$('.tabs').tabs();
});
</script>
</body>
</html>
希望对你有所帮助。
英文:
I can see you are trying to use tab in navbar. So, you are missing 2 things:
- JQuery CDN link
- 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:
<!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>
答案2
得分: 1
你需要正确使用 tab 类，请尝试以下代码：
<!-- language: lang-css -->
.tab a{
color:#bbb !important;
}
.tab a.active{
color:#eee !important;
}
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div class="row ">
<div class="col s12">
<ul class="tabs red lighten-1">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3"><a href="#test3">Test 3</a></li>
</ul>
</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>
这是你提供的代码的翻译部分。
英文:
You have to use tab class properly, try the below code
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tab a{
color:#bbb !important;
}
.tab a.active{
color:#eee !important;
}
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div class="row ">
<div class="col s12">
<ul class="tabs red lighten-1">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3"><a href="#test3">Test 3</a></li>
</ul>
</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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论