Codepen hexagon菜单疑难解答帮助：我的html文件是否未正确链接到javascript文件？_Javascript_Html

Codepen hexagon菜单疑难解答帮助：我的html文件是否未正确链接到javascript文件？

javascript html

Codepen hexagon菜单疑难解答帮助：我的html文件是否未正确链接到javascript文件？,javascript,html,Javascript,Html,我是一个自学成才的程序员，如果有人能给我一些建议，让我从codepen下载的以下六边形动画菜单开始工作（链接：），我将不胜感激。现在我已经创建了3个文件：hexmenu.html、hexmenu.css和hexmenu.js，当然都在同一个文件夹中。但是当我将代码笔中的代码粘贴到每个文件中时，菜单似乎不起作用。我的文件头链接到js和css，如下所示： <!DOCTYPE html> <head> <html lang="en"> <meta charse

我是一个自学成才的程序员，如果有人能给我一些建议，让我从codepen下载的以下六边形动画菜单开始工作（链接：），我将不胜感激。现在我已经创建了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端出了问题。谁能告诉我我错过了什么？我甚至创建了一个JSFIDLE来检查代码本身是否正常工作，以及一切是否顺利运行。然而，当我把文件放在桌面上，在谷歌浏览器和火狐浏览器上运行时，菜单并没有打开。。。在这一点上，一个简单的解决办法将是天赐良机！我想作为一个新手，我肯定错过了一些明显的东西…

你必须在你的头标签中添加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>

您需要javascript中的

窗口。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>


window.onload=函数（）{
var hexNav=document.getElementById（'hexNav'）；
document.getElementById（'menuBtn'）。onclick=function（）{
var className=''+hexNav.className+''；
if（~className.indexOf（'active'））{
hexNav.className=className.replace（'active'，''）；
}否则{
hexNav.className+=“活动”；
}              
}
};

希望能有帮助

你是从codepen还是SCS中获得编译后的css？我记得编译了css，而且它实际上似乎也能工作，谢谢你的快速评论。打开开发面板，看看你的所有资源是否都被加载了。嗯，我正在firefox上使用inspect元素。我现在100%确信CSS正在工作。在我的非专业意见中，这肯定与JS未加载有关，但我不明白为什么？谢谢Ketan的所有帮助，谢谢你，终于让它工作了！