<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML点击导航栏切换内容</title>
<style>
/* 隐藏所有内容部分 */
.content {
display: none;
}
/* 默认显示第一个内容部分 */
.content:first-of-type {
display: block;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<ul id="nav">
<li><a href="#" data-target="section1">首页</a></li>
<li><a href="#" data-target="section2">关于我们</a></li>
<li><a href="#" data-target="section3">联系我们</a></li>
</ul>
<!-- 内容部分 -->
<div id="content">
<div class="content" id="section1">
<h2>首页</h2>
<p>欢迎来到我们的网站！</p>
</div>
<div class="content" id="section2">
<h2>关于我们</h2>
<p>我们是一个专注于提供高质量服务的团队。</p>
</div>
<div class="content" id="section3">
<h2>联系我们</h2>
<p>如果您有任何问题，请随时联系我们。</p>
</div>
</div>
<script>
// 获取导航栏链接和内容部分
const navLinks = document.querySelectorAll('#nav a');
const contents = document.querySelectorAll('.content');
// 添加点击事件监听器
navLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认行为
// 获取目标内容的ID
const targetId = this.getAttribute('data-target');
// 隐藏所有内容部分
contents.forEach(content => {
content.style.display = 'none';
});
// 显示目标内容部分
document.getElementById(targetId).style.display = 'block';
});
});
</script>
</body>
</html>HTML结构:
ul#nav：包含导航栏的链接，每个链接通过 data-target 属性指定要显示的内容部分。div#content：包含多个 div.content，每个 div 代表一个内容部分，初始状态下只有第一个内容部分可见。CSS样式:
.content：默认隐藏所有内容部分。.content:first-of-type：确保页面加载时默认显示第一个内容部分。JavaScript逻辑:
querySelectorAll 获取所有导航链接和内容部分。上一篇：html透明度代码
下一篇：html中—————这条横线
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站