点击nav-button时关联内容无法显示的技术求助

问题场景 #

搭建了带有顶部导航按钮（.nav-button）的网站，每个按钮对应一个内容容器（.content-container），预期点击按钮时显示对应内容，但点击后内容未出现。相关代码及预期内容如下：

原JS代码

// Show/hide content containers when navigation buttons are clicked
document.addEventListener("DOMContentLoaded", function() {
// Get all the navigation buttons
const navButtons = document.querySelectorAll(".nav-button");

// Get all the content containers
const contentContainers = document.querySelectorAll(".content-container");

// Add click event listeners to each button
navButtons.forEach((button, index) => {
    button.addEventListener("click", function(event) {
        event.preventDefault();
        // Hide all the content containers
        contentContainers.forEach((container) => {
            container.style.display = "none";
        });

        // Show the content container corresponding to the clicked button
        const targetId = button.getAttribute('href');
        const targetContent = document.querySelector(targetId + '-content');

        // Check if the content container exists
        if (targetContent) {
            targetContent.style.display = "block";
            }
        });
    });
});

// Form submission handling
document.addEventListener('DOMContentLoaded', function () {
    const contactForm = document.getElementById('contact-form');
    if (contactForm) {
       contactForm.addEventListener('submit', handleFormSubmission);
   }
});

function handleFormSubmission(event) {
    event.preventDefault();
    // Replace the following lines with your desired form submission logic
    const formData = new FormData(event.target);
    const name = formData.get('name');
    const email = formData.get('email');
    const message = formData.get('message');
    console.log(`Name: ${name}, Email: ${email}, Message: ${message}`);
    alert('Thank you for your submission! We will get in touch soon.');
    event.target.reset(); // Reset the form after submission
}

预期显示的内容示例

<div id="about-content" class="content-container">
    <h2>About Us</h2>
    <p>Welcome to Chick Ventures. We are a leading venture capital firm...</p>
</div>

问题排查与修复方案 #

1. 按钮href与容器ID匹配问题

原代码通过button.getAttribute('href') + '-content'定位容器，若按钮的href为#about，则拼接后为#about-content，与示例容器ID匹配；但如果href不带#（如about），拼接后会变成about-content，querySelector无法找到对应元素。

修复：统一href格式或修正JS逻辑，推荐用getElementById更直接：

// 修正目标容器定位逻辑
const targetId = button.getAttribute('href').replace('#', '');
const targetContent = document.getElementById(`${targetId}-content`);

2. 内容容器初始状态未隐藏

若内容容器初始为显示状态，虽点击按钮会先隐藏所有容器，但首次体验不佳，且可能导致逻辑混淆。

修复：添加CSS设置初始状态：

.content-container {
    display: none;
}
/* 默认显示第一个内容容器 */
.content-container:first-child {
    display: block;
}

3. 重复绑定DOMContentLoaded事件

原代码两次绑定DOMContentLoaded事件，虽不报错，但可合并优化代码结构：

document.addEventListener("DOMContentLoaded", function() {
    // 导航按钮逻辑
    const navButtons = document.querySelectorAll(".nav-button");
    const contentContainers = document.querySelectorAll(".content-container");

    navButtons.forEach((button) => {
        button.addEventListener("click", function(event) {
            event.preventDefault();
            contentContainers.forEach((container) => {
                container.style.display = "none";
            });
            const targetId = button.getAttribute('href').replace('#', '');
            const targetContent = document.getElementById(`${targetId}-content`);
            if (targetContent) {
                targetContent.style.display = "block";
            }
        });
    });

    // 表单提交逻辑
    const contactForm = document.getElementById('contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', handleFormSubmission);
    }
});

function handleFormSubmission(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const name = formData.get('name');
    const email = formData.get('email');
    const message = formData.get('message');
    console.log(`Name: ${name}, Email: ${email}, Message: ${message}`);
    alert('Thank you for your submission! We will get in touch soon.');
    event.target.reset();
}

4. 元素选择器拼写错误

检查HTML中导航按钮的类名是否为nav-button，内容容器的类名是否为content-container，避免拼写错误导致无法选中元素。

内容的提问来源于stack exchange，提问作者devstudent