javascript - 如何在 Visual Studio 代码上将 Javascript 代码混合/添加到 Html 代码?
问题描述
我有一些问题要理解为什么我的onclick="showMenu"
和onclick="hideMenu"
功能不起作用。有什么推荐吗?
<section class="header">
<nav>
<a href="index.html"><img src="Bilder/Logo.jpg"></a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times"> <script>onclick="hideMenu()"</script></i>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">COURSE</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars"><script>onclick="showMenu()"</script></i>
</nav>
<div class="text-box">
<h1>Some text...</h1>
<p>Some text..</p>
<a href="" class="hero-btn">Button Text..</a>
</div>
</section>
<!-------Javascript for Menu--------->
<script>
var navLinks = document.getElementById("navLinks");
funnction showMenu(){
navLinks.style.right = "0";
}
funnction hideMenu(){
navLinks.style.right = "200px";
}
</script>
解决方案
我建议你使用 a 单击图标
<nav>
<a href="index.html">
<img src="Bilder/Logo.jpg">
</a>
<div class="nav-links" id="navLinks">
<a href="javascript:hideMenu()">
<i class="fa fa-bars">
</i>
</a>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">COURSE</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
<a href="javascript:showMenu()">
<i class="fa fa-bars">
</i>
</a>
</nav>
<div class="text-box">
<h1>Some text...</h1>
<p>Some text..</p>
<a href="" class="hero-btn">Button Text..</a>
</div>
</section>
<!-------Javascript for Menu--------->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "200px";
}
</script>
推荐阅读
- mysql - 修改 MySQL 查询或在 PHP 中运行
- c# - Unity3D - 如何将对象从屏幕的一侧传送/推送到另一侧?
- r - r 重复测量输出误差(主效应显示两次,主题之间显示为内)
- android - 如何根据设备分辨率在 react-native 中设置小通知图标
- r - 在 RStudio 中使用 do.call 合并多波段卫星图像栅格砖时出错
- javascript - ES6 模块:如何从 index.js 自动重新导出当前目录中的所有类型?
- javascript - 将数组(对象)从 popup.js 传递到 chrome 扩展中的 content.js
- python - 为什么 argparse 仅在显式调用 python 解释器时才起作用?
- php - jQuery 和 Wordpress ajax 调用返回 400 错误请求
- json - 使用 jq 从每个主要节点版本中获取最新版本