如何通过点击带href的a标签控制对应div的显示隐藏？

步骤1：修正初始隐藏逻辑 #

你的JS代码错误地选择了<a>标签而非目标<div>元素，需改为选择所有class为div的元素并隐藏。另外getElementsByClassName返回HTMLCollection，无法直接用forEach，需转换为数组。

步骤2：添加点击事件关联逻辑 #

为每个带href的<a>标签绑定点击事件，提取href中的目标ID，隐藏所有div后仅显示对应ID的元素。

完整修正代码 #

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>doc</title>
    <link rel="stylesheet" href="x.css">
</head>
<body>
    <header>
        <nav>
            <a class="options" href="#a">a</a>
            <a class="options" href="#b">b</a>
            <a class="options" href="#c">c</a>
        </nav>
    </header>

    <main>
        <div class="div" id="a">
            aaa
        </div>

        <div class="div" id="b">
            bbb
        </div>

        <div class="div" id="c">
            ccc
        </div>

    </main>
    <script src="./x.js"></script>
</body>
</html>

CSS（保持原样式）

.hide{
    display: none;
}
.show{
    display: block;
}

.div{
    height: 50vh;
    width: 50vw;
    margin: 20px;
    padding: 20px;
    background-color: #abcdef;
    border: 1px solid black;
}

JavaScript（核心修正）

// 初始隐藏所有class为div的元素
const targetDivs = document.getElementsByClassName('div');
Array.from(targetDivs).forEach(div => {
    div.classList.add('hide');
});

// 为所有选项a标签绑定点击事件
const links = document.getElementsByClassName('options');
Array.from(links).forEach(link => {
    link.addEventListener('click', (e) => {
        // 阻止a标签默认跳转行为
        e.preventDefault();
        
        // 提取href中的目标ID（去除#前缀）
        const targetId = link.getAttribute('href').slice(1);
        
        // 隐藏所有div
        Array.from(targetDivs).forEach(div => {
            div.classList.add('hide');
            div.classList.remove('show');
        });
        
        // 显示对应ID的div
        const targetDiv = document.getElementById(targetId);
        if (targetDiv) {
            targetDiv.classList.remove('hide');
            targetDiv.classList.add('show');
        }
    });
});

关键说明 #

• 使用Array.from()将HTMLCollection转为数组，支持forEach遍历。
• e.preventDefault()避免锚点标签默认的页面滚动跳转。
• 通过slice(1)从href中提取纯ID字符串，实现与目标div的关联。
• 用CSS类控制显示状态，比直接操作style.display更易维护和扩展。

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