求助：原生JS实现单页面动态切换内容的代码问题

你的代码问题分析 #

1. 链接的href="/pagina2.html"会触发页面跳转，完全违背单页面内容切换的需求
2. JS逻辑错误：onclick并非当前点击的元素对象，且未给链接绑定任何点击事件
3. 变量title未定义，代码里实际获取的是h1变量

修正后的完整实现代码 #

单页面HTML结构（无需单独创建pagina2.html）

<a href="#" data-content="dog" id="a1">Aqui</a>
<a href="#" data-content="cat" id="aa">Teste</a>

<div id="main">
    <h1 id="title">Lindo</h1>
</div>

核心JS代码

// 获取元素
const toggleLinks = document.querySelectorAll('a[data-content]');
const titleEl = document.getElementById('title');
const mainContainer = document.getElementById('main');

// 配置各卡片对应的内容与样式，新增卡片只需加配置
const contentMap = {
    dog: {
        titleText: "Leandro O cachorro",
        bgColor: "green"
    },
    cat: {
        titleText: "Belle Belinha",
        bgColor: "red"
    }
};

// 绑定点击事件
toggleLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        // 阻止链接默认跳转行为
        e.preventDefault();
        // 获取当前链接对应的内容标识
        const contentKey = this.dataset.content;
        // 读取配置并更新页面
        const targetContent = contentMap[contentKey];
        if (targetContent) {
            titleEl.innerText = targetContent.titleText;
            mainContainer.style.backgroundColor = targetContent.bgColor;
        }
    });
});

实现逻辑说明 #

• 用href="#"配合e.preventDefault()彻底阻止页面跳转，保证单页面状态
• 通过data-content自定义属性标记每个链接对应的内容类型，扩展性更强
• 用对象统一管理内容配置，新增卡片时无需修改事件逻辑，只需添加配置项
• 事件委托式的绑定方式，避免重复代码，后续新增链接自动生效

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