网页html点击切换显示内容完整代码--打印文章

网页html点击切换显示内容完整代码来源于瑞达科技网

作者：佚名文章来源：本站整理点击数更新时间：2023/11/7 文章录入：瑞达责任编辑：瑞达科技

效果

<html>

<head>

<title>菜单切换内容示例</title>

</head>

<body>

<nav>

<ul>

|<a href="#about">2023年</a>

</li></ul>

</nav>

</section>

</section>

//获取菜单列表

var menuList = document.querySelectorAll("nav ul li a");

//遍历菜单列表，绑定点击事件

for (var i = 0; i < menuList.length; i++) {

menuList[i].addEventListener("click", function(event) {

//获取当前被点击的菜单链接的href属性

var href = this.getAttribute("href");

//获取对应的内容节点

var content = document.querySelector(href);

//隐藏所有内容节点

var allContent = document.querySelectorAll("section");

for (var j = 0; j < allContent.length; j++) {

allContent[j].style.display = "none";

}

//显示对应的内容节点

content.style.display = "block";

//阻止默认跳转行为

event.preventDefault();

});

}

</script>

</body>

</html>