为什么javascript实现在我的网站不工作?



脚本我实现到我的网站不工作,我已经检查了一切,我沿着教程。什么好主意吗?

链接到我的github仓库:https://github.com/DBvagabond/dbogdanski链接到网站预览:https://htmlpreview.github.io/?https://github.com/DBvagabond/dbogdanski/blob/main/index.html

HTML

<body>
<div class="navbar">
<div class="container">
<a class="logo" href="index.html"><span>d</span>bogdanski</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu1.svg" alt="menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit1.svg" alt="exit">
<ul class="primary-nav">
<li class="current"><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Social</a></li>
</ul>
<ul class="secondary-nav">
<li class="contact-cta"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
<section class="hero">
hero
</section>

<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
}) 
</script>
</body>

SCSS

.navbar {
background: var(--primary-color);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--secondary-color);
font-size: 1.2em;
span {
color: white;
}
}
nav {
display: none;
}
.mobile-menu{
width: 1.5em;
cursor: pointer;
display: block;
}

.container {
display: flex;
place-content: space-between;
}  

.mobile-menu-exit{
width: 1.5em;
float: right;
margin: .5em;
cursor: pointer;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section {
padding: 5em 2em;
}
nav {
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: grey;
height: 100vh;
padding: 1em;
ul.primary-nav {
margin-top: 5em;
}
li {
a{
color: var(--secondary-color);
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
}
}
}
}

我检查了错误,从作者的存储库复制并粘贴了代码。手机菜单应该在点击汉堡包菜单图标后弹出并关闭。

为什么JavaScript不能在我的网站上工作?在web浏览器菜单上单击"编辑"。并选择"首选项"。在"首选项"中窗口,选择"安全";选项卡。在"安全"中;标签部分"Web内容";标记"启用javascript";复选框。点击"重新加载当前页面"网页浏览器的刷新按钮。

最新更新