这是我的materializecss框架，使用下面的html代码。这是我第一次尝试实现卡。
我不知道为什么卡片揭示课程不起作用。请帮我激活卡片揭示。谢谢。
<!doctype HTML>
<html>
<head>
<title>materialize cards</title>
<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/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<nav class="blue darken-2">
<div class="navbar-wrapper container">
<a href="#" class="brand-logo">MyMaterializecss</a>
<ul class="right">
<li><a href="#">HOME</a>
</li>
<li><a href="#">PRODUCTS</a>
</li>
<li><a href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col l4">
<div class="card-panel pink white-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
<div class="col l4">
<div class="card-panel">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
<div class="col l4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="shuvonet-revised-front-end-03.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p><a href="#">This is a link</a>
</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer blue darken-2">
<div class="container">
<div class="footer-copyright">
Copyright © 2016 Jarin | All rights reserved.
</div>
</div>
</footer>
</body>
</html>
答案 0 :(得分：1)
通常最好在正文末尾导入js文件以减少页面加载时间。
此外，在导入jQuery
materialize.js
以下是jsfiddle
<!doctype HTML>
<html>
<head>
<title>materialize cards</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<nav class="blue darken-2">
<div class="navbar-wrapper container">
<a href="#" class="brand-logo">MyMaterializecss</a>
<ul class="right">
<li><a href="#">HOME</a>
</li>
<li><a href="#">PRODUCTS</a>
</li>
<li><a href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col l4">
<div class="card-panel pink white-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
<div class="col l4">
<div class="card-panel">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
<div class="col l4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="shuvonet-revised-front-end-03.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p><a href="#">This is a link</a>
</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer blue darken-2">
<div class="container">
<div class="footer-copyright">
Copyright © 2016 Jarin | All rights reserved.
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
</body>
</html>
答案 1 :(得分：0)
你的错误是:(脚本标签中的css）
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"></script>
将其替换为：
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
你去了：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!doctype HTML>
<html>
<head>
<title>materialize cards</title>
<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/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<nav class="blue darken-2">
<div class="navbar-wrapper container">
<a href="#" class="brand-logo">MyMaterializecss</a>
<ul class="right">
<li><a href="#">HOME</a>
</li>
<li><a href="#">PRODUCTS</a>
</li>
<li><a href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col 14">
<div class="card-panel pink white-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
<div class="col 14">
<div class="card-panel">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
</div>
<div class="row">
<div class="col l4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="shuvonet-revised-front-end-03.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p><a href="#">This is a link</a>
</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer blue darken-2">
<div class="container">
<div class="footer-copyright">
Copyright © 2016 Jarin | All rights reserved.
</div>
</div>
</footer>
</body>
</html>