javascript - 如何让 Materialise Feature Discovery Block 显示在我的网页上？
问题描述
当我单击打开按钮时，我试图让功能块显示在页面上，但它没有做任何事情。我有一个偷偷的暂停，这与我正在导入的 CDN 及其位置有关。或者这可能与我的代码中相关点击目标部分的顺序有关，我不太确定。我遵循了如何逐字设置的 Materialise 示例，但似乎我不能完全正确。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mitchell Data Science</title>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/init.js"></script>
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container-fluid">
<a id="logo-container" href="index.html" class="brand-logo" style="padding-left: 30px;">Mitchell Data Science</a>
<ul class="right hide-on-med-and-down" style="padding-right: 30px">
<li><a href="index.html">HOME</a></li>
<li><a href="portfolio_navigator.html">PORTFOLIO</a></li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li><a href="index.html">HOME</a></li>
<li><a href="portfolio_navigator.html">PORTFOLIO</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
</nav>
<div id="index-banner" class="parallax-container" style="height: 350px">
<div class="section no-pad-bot">
<div class="container">
<h1 class="header center teal-text text-darken-2" style = "font-weight: 600;">Mitchell Data Science</h1>
<div class="row center">
<h5 class="header col s12 dark" >Explore, Discover, Understand…</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_1.1.jpg" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="col lg9 m9 s12">
<div class="container">
<br>
<h1> Heroes of Pymoli Data Munging</h1>
<hr><br>
</div>
<div class="row">
<div class="col-3">
<div id="list-example" class="list-group" data-offset="0">
<a class="list-group-item list-group-item-action" href="#list-item-1">Abstract </a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Wrangled Data </a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Summary</a>
</div>
</div>
<!-- Element Showed -->
<div class="fixed-action-btn">
<a id="menu" class="waves-effect waves-light btn-large btn-floating" ><i class="material-icons">menu</i></a>
</div>
<!-- Tap Target Structure -->
<div class="tap-target" data-target="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
<a class="btn" id="open">open</a>
<a class="btn" id="close">Close</a>
<script>
$('#open').click(function(){
$('.tap-target').tapTarget('open');
});
</script>
<div class="col-9">
<div data-spy="scroll" data-target="#list-example" data-offset="0"
class="scrollspy-example change-color-black">
<h4 id="list-item-1">Abstract</h4>
<p>
<br><br><br><br>
<img src="static/media/heros_fantasy.jpg"
alt="Heroes of Pymoli Abstract Picture">
<p>
In this project, I have explored a game called Heroes Of Pymoli. I will be doing some data
wrangling to clean and organize my dataset, and strategically group the data to derive
educated observations and assumptions.</p>
<br><br><br><br>
</p>
<h4 id="list-item-2">Wrangled Data</h4>
<p>
<br><br><br>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/TP_hero.PNG"
alt="Total Players">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/purchasing_analy_hero.PNG"
alt="Purchasing Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_count_analy_hero.PNG"
alt="Gender Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_purchasing_analy_hero.PNG"
alt="Purchasing Analysis by Gender">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/age_analy_hero.PNG"
alt="Age Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_pop_items.PNG"
alt="Most Popular Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_profitable_items.PNG"
alt="Most Profitable Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/top_spenders.PNG"
alt="Top Spenders">
<br><br><br><br><br>
</p>
<h4 id="list-item-3">Summary</h4>
<p>
<br><br><br><br>
- The 20 – 24 yo age group is the biggest age demographic for the game accounting for 44.79% of
the overall players. The two lowest volumes of players by age are the under 10 yo group at 2.95%
and the 40+ group at 2.08%.
<br><br>
- The overall total revenue from the game is $2,379.77.
<br><br>
- From the business standpoint, the 35-39 yo age group would be a goo place to focus the
marketing efforts. Even though their total purchase value is relatively small ($147.67) in
comparison to some other demographics, they spend the most on average per purchase ($3.60).
<br><br>
- Item number 178, the Oathbreaker, Last Hope of the Breaking Storm is both the most popular
item at 12 overall purchases, and the most profitable item at a total purchase value of $50.76.
<br><br>
- The player with the Screen Name Lisosia93 is the most prolific buyer with 5 purchases. This
player has spent a total of $18.96 with an average purchase amount of $3.79.
<br><br>
- Of the all the active players, the vast majority are male (84.03%). There also exists, a
smaller, but notable proportion of female players (14.06%).
<br><br><br><br><br>
</p>
</div>
</div>
</div>
</div>
<div class="container">
<h3>Project Links</h3>
<ul>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-"
target="_blank">Heroes Of Pymoli Data Munging</a>
</li>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/blob/master/Heroes_Of_Pymoli_Data_Analysis_FINAL.ipynb"
target="_blank">Heroes Of Pymoli Kernel (Code)</a></li>
<li><a href="hero_game_project_data.html">Data</a></li>
</ul>
<br><br>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light" style = "font-weight: bold">A cutting edge approch to data exploration and vizualization.</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_2.jpg" alt="Unsplashed background img 3"></div>
</div>
<footer class="page-footer black">
<div class="row">
<h4>
<a id="logo-container" class="brand-logo" style="padding-left: 25px;">MDS</a>
</h4>
</div>
<div class="footer-copyright" style="padding-left: 25px">
<div class="container-fluid">
Made by <a class="brown-text text-lighten-3"> Howard G. Mitchell III</a>
</div>
</div>
</footer>
<!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<!--
<script> document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems, tapTarget('open'));
});</script> -->
</body>
</html>
解决方案
请务必初始化功能发现：
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.tap-target').tapTarget();
});
https://materializecss.com/feature-discovery.html#initialization
推荐阅读
- google-apps-script - 使用 Google Script 抓取网页，异步网站？
- ruby-on-rails - 查询包含所有项目的关联
- html - 为什么位置固定的标签在不同的html页面上的位置略有不同？
- javascript - 有什么办法可以强制浏览器不提示记住密码框吗？
- kubernetes - Cert-manager 在带有 webhook 的 kubernetes 上失败
- oop - Perl 6 多方法从不匹配预期的签名
- sql - 获取更改状态的记录数
- delphi - 是否有允许超链接的多行文本对象？
- android - 使用 PendingIntent 时重复数据
- android - 服务在自定义操作系统设备上被杀死