Question

我是一名自学成才的编码员，如果有人能就如何获得我从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。每个文件都直接粘贴到不同的文件中，没有任何修改（这些文件中没有任何其他内容！），因此我有点感到困惑，为什么这不起作用。有什么建议吗？！ css文档似乎正在工作，但我认为javascript端有问题。谁能让我知道我失踪了什么？我甚至创建了一个jsfiddle来检查代码本身是否正常工作并且一切运行顺利。然而，当我将文件放在我的桌面上并在谷歌浏览器和Firefox上运行时，菜单并没有打开......在这一点上，一个简单的修复将是一个天赐之物！我觉得作为一个新手我必须在这里找不到明显的东西...

Answer 1

您需要在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

Answer 2

你必须在你的head标签中添加js库，

<script src="http://code.jquery.com/jquery-2.1.3.min.js" ></script>

实际上你的代码是错的，

<!DOCTYPE html>
<head>
<html lang="en">

替换为，

   <!DOCTYPE html>  
    <html lang="en">
   <head>

Codepen六边形菜单疑难解答帮助：我的html文件没有正确链接到我的javascript文件？

2 个答案: