如何使用JavaScript编写一个简单的网站导航菜单?
const nav = document.querySelector('nav');
nav.addEventListener('click', (event) => {
const target = event.target;
const href = target.getAttribute('href');
if (href) {
window.location.href = href;
}
});
使用方法:
-
将代码插入网页的
标签中。
-
确保
元素存在。
-
运行代码。
结果:
当您点击任何链接时,网站将自动跳转到相应的页面。例如,如果您点击“首页”链接,则网站将跳转到 “index.html” 页面。
注意:
-
querySelector
方法返回第一个匹配元素。如果您需要使用多个导航链接,请使用querySelectorAll
方法。 -
getAttribute
方法返回元素的属性值。在该示例中,href
属性存储导航链接的属性值。 -
window.location.href
方法用于设置当前页面的 URL。