gpt4 book ai didi

javascript - Foundation 5 JS 插件不起作用

转载 作者:行者123 更新时间:2023-11-28 07:48:53 25 4
gpt4 key购买 nike

我已经使用 Foundation 几年了,但直到我升级到 Foundation 5 之前,JS 插件才出现问题。我运行了 Bower 'bundle' 并更新了文件路径,但没有不管怎样,除非通过控制台手动调用,否则像 Reveal 和 Joyride 这样的插件永远不会触发。开发工具没有抛出任何错误或显示任何丢失的文件,所以我不确定发生了什么。

这是我的 super 基本标记:

<html class='no-js' lang='en'>
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<link href='stylesheets/app.css' rel='stylesheet'>
<script src='bower_components/modernizr/modernizr.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
</head>
<body>
<div class='row'>
<div class='small-12 columns'>
<a data_reveal_id='myModal' href='#'>
<button>Hello!</button>
</a>
</div>
</div>
<div class='reveal-modal' data_reveal id='myModal'>
<h1>I'm a modal!</h1>
<a class='close-reveal-modal'>&#215;</a>
</div>
<script src='bower_components/foundation/js/foundation.min.js'></script>
<script src='bower_components/fastclick/lib/fastclick.js'></script>
<script>
$(document).foundation();
</script>
</body>
</html>

任何帮助将不胜感激!我尝试检查我能找到的所有其他线程,但没有看到类似的问题。

最佳答案

您的代码中有 2 个错误。

  1. 不要使用下划线,使用连字符才能使数据属性起作用正确
  2. 不要将按钮放在 anchor 标记内,按钮就足够了。

像这样:

<html class='no-js' lang='en'>
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<link href='stylesheets/app.css' rel='stylesheet'>
<script src='bower_components/modernizr/modernizr.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
</head>
<body>
<div class='row'>
<div class='small-12 columns'>
<!--<a data_reveal_id='myModal' href='#'>-->
<button data-reveal-id='myModal'>Hello!</button>
<!--</a>-->
</div>
</div>
<div class='reveal-modal' data-reveal id='myModal'>
<h1>I'm a modal!</h1>
<a class='close-reveal-modal'>&#215;</a>
</div>
<script src='bower_components/foundation/js/foundation.min.js'></script>
<script src='bower_components/fastclick/lib/fastclick.js'></script>
<script>
$(document).foundation();
</script>
</body>
</html>

关于javascript - Foundation 5 JS 插件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27094365/

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