个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
26
4
我是一个自学成才的编码员，如果有人能给我一些建议，让我知道如何让我从 codepen 下载的以下六边形动画菜单正常工作，我将不胜感激(链接:http://codepen.io/web-tiki/pen/WvNQpG)。现在我已经创建了 3 个文件:hexmenu.html、hexmenu.css 和 hexmenu.js 当然都在同一个文件夹中。但是当我将代码笔中的代码粘贴到每个文件中时，菜单似乎不起作用。链接到 js 和 css 的我的文件的头部如下:
<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="UTF-8" />
<title>PASSION DEVELOPMENT PROJECT</title>
<link href="hexmenu.css" rel="stylesheet" type="text/css" />
<script src="hexmenu.js" ></script>
</head>
现在codepen中的所有html代码都在body标签中； hexmenu.css 中的 css 和 hexmenu.js 文件中的 javascript。每个文件都直接从 codepen 直接粘贴到不同的文件中，没有任何修改(这些文件中没有其他任何东西!)，因此我有点困惑为什么这不起作用。有什么建议吗？! css 文档似乎可以正常工作，但我认为 javascript 端有问题。谁能让我知道我错过了什么？我什至创建了一个 jsfiddle 来检查代码本身是否正常工作并且一切运行顺利。然而，当我将文件放在桌面上并在 google chrome 和 firefox 上运行时，菜单没有打开......此时一个简单的修复将是天赐之物!我想作为一个新手，我一定在这里遗漏了一些明显的东西......
最佳答案
您需要在 javascript 中使用 window.onload。我检查以下 通过添加 window.onload 在我的本地代码，现在它像在 codepen 中一样工作魅力。
这里我将所有代码添加到同一个 HTML 页面中，您可以将 javascript 分开。
使用以下代码:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
window.onload = function() {
var hexNav = document.getElementById('hexNav');
document.getElementById('menuBtn').onclick = function() {
var className = ' ' + hexNav.className + ' ';
if ( ~className.indexOf(' active ') ) {
hexNav.className = className.replace(' active ', ' ');
} else {
hexNav.className += ' active';
}
}
};
</script>
</head>
<body>
<nav id="hexNav">
<div id="menuBtn">
<svg viewbox="0 0 100 100">
<polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="none" stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300"/>
</svg>
<span></span>
</div>
<ul id="hex">
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
</ul>
</nav>
</body>
</html>
希望对您有所帮助。 Fiddle link
关于javascript - Codepen 六边形菜单故障排除帮助 : is my html file not properly linking to my javascript file?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29912243/
26
4
0
我一直在使用 Tensorflow 解决线性回归问题。我得到一条平坦的曲线 pred_y。我应该如何将我的曲线与观察的训练示例拟合？ 这是我的 tensorflow 代码: # coding: utf
我浏览了这个网站，找不到类似的场景。我正在尝试运行以下代码 SELECT st.storeid, s.noofitems FROM salestrnsaction AS st, soldvia AS
请善待我，我是 Python 初学者:-) 现在，我发现编写 Python 程序的“最佳实践”是将主代码包装在“main”函数中，并执行 if "__main__"== __name__: 测试调用“
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 9 年前。 Improve
这个问题在这里已经有了答案: What is the reason to use the 'new' keyword at Derived.prototype = new Base (6 个答案)
我正尝试在 tomcat 上为我的 jersey webapp 创建一个用户登录页面，它的行为与网络上的所有其他页面一样。也就是说，用户会看到一个漂亮的登录页面而不是弹出窗口(如 BASIC tomc
我正在尝试让 Android 服务监听来电，当确实有来电时，获取来电号码并向其发送短信。 在我的服务中，我制作了一个PhoneStateListener: TelephonyManager tMana
是否有适当的地方来存储数据库的高级描述？类似于“此数据库用于存储 XYZ 以供 ABC 使用”之类的内容。这不一定是人们需要查询的信息，而是对管理系统的人有用的信息(即几个月前我试图记住几个月前我试图
下面的排序逻辑非常简单: 1. 标记不包含所选排序值的产品 2. 按所选排序值的数量降序对产品进行排序 3.隐藏不包含所选排序值的产品 我添加了简单的排序逻辑，它可以对元素进行排序(可以在控制台中预期
这个问题在这里已经有了答案: Where does Visual Studio look for C++ header files? (7 个答案) 关闭 9 年前。 所以，我在 VS2010 中开
我正在尝试连接到 MSMQ 并发送一些消息。不幸的是，项目中有关于如何做到这一点的“先前艺术”，我应该模仿它。之前的应用程序的连接方式如下: if (MSMQ in workgroup mode) {
我正在编写一个可能会被其他人使用的 ROS 节点，这就是我想要遵循通用指南的原因。有时我想为异常添加额外的信息，但我不知道该怎么做。这是一个方便的示例: 我的 ROS 节点使用 boost 库连接到串
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 4 年前。 Improve
我在摆弄 django-tinyMCE并注意到一些配置没有得到应用。这是我的 settings.py 中的代码 TINYMCE_DEFAULT_CONFIG = { 'theme' : 'ad
回顾我过去的项目，我经常遇到这个: 一位客户或经理向我提出一项任务并要求进行估算。我估计说 24 小时。他们还询问了业务分析师，据我所知，他们的经验大多是非技术性的。他们给出的估计是 16 小时。最后
我使用以下方式调用几个sql文件: :r C:\Scripts\Script1.sql :r C:\Scripts\Script2.sql :r C:\Scripts\Script3.sql 我对 :
在类构造函数中初始化 AS3 类变量“更好”吗？或者当我在类的顶部声明它们时，我可以将它们初始化为默认值吗？我问这个问题是因为当有很多类变量时，在一个地方声明它们然后在另一个地方初始化它们似乎效率很低
我有一个代码: $("#button").click(function () { for (var i = 0; i < 4; i++) {
我们的应用程序正在被翻译成多种语言，我们需要一个组合框来列出可能的语言。我们希望使用该语言的语言名称(例如，Français 表示法语)。 列出这些语言是否有任何“正确”的顺序？我们是否根据他们的
我正在尝试在 Ubuntu 12.04 中使用 Tramp/Emacs-23 来编辑远程主机文件。我的远程主机有两步验证 (RSA+Passwd)。我通过 .ssh/config 使用多路复用来确保
我是一名优秀的程序员,十分优秀！