logo标签列表

Codepen六边形菜单故障排除帮助：我的HTML文件是否没有正确链接到我的JavaScript文件？

javascripthtml
3
我是一个自学的程序员，如果有人能给我一些关于如何让我从codepen下载的以下六边形动画菜单（链接：http://codepen.io/web-tiki/pen/WvNQpG）正常工作的建议，我将不胜感激。现在我已经创建了三个文件：hexmenu.html、hexmenu.css和hexmenu.js，当然都在同一个文件夹中。但是，当我在每个文件中粘贴来自codepen的代码时，菜单似乎无法工作。我的文件头连接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代码都在标签中； CSS在hexmenu.css文件中，JavaScript在hexmenu.js文件中。每个文件都是直接从codepen中复制粘贴而来的且未经修改（这些文件中没有其他内容！），因此我对为什么这不起作用感到有些困惑。有什么建议吗？CSS文档似乎是有效的，但我认为JavaScript方面出了问题。有人能告诉我缺少什么吗？我甚至创建了一个jsfiddle来检查代码本身是否工作正常，并且一切都顺利运行。但是，当我将文件放在桌面上并在Google Chrome和Firefox上运行它时，菜单无法打开...现在非常需要一个简单的修复！我想我作为一个初学者，在这里可能会错过一些明显的东西...
你是从 CodePen 中拿到已编译的 CSS 还是 SCSS 文件呢？ - Bobby Tables
我记得编译CSS，而且它似乎也能正常工作，顺便感谢您的快速评论。 - Thomas Jones
打开开发面板，查看是否加载了所有资源。 - Xander Luciano
嗯，我在Firefox上使用检查元素。我现在100%确定CSS正在工作。依我不专业的意见，这肯定与JS未加载有关，但我不明白为什么？ - Thomas Jones
2个回答
2
你需要在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>

Hope it helps. Fiddle link

感谢Ketan提供的所有帮助，终于因为你让它运作起来了！ - Thomas Jones
0

你需要在头部标签中添加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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接