点击侧边栏合作方名称时为对应内容加selected类并隐藏其余区块的实现方案

实现步骤 #

1. 修正HTML ID冲突问题 #

HTML规范要求同一页面ID唯一，你当前侧边栏合作方项和右侧内容区块ID重复，我们改用data-*属性关联二者，修改侧边栏的合作方项代码如下：

<div class="slide">
    <h4 class="slid-header">| Partners</h4>
    <p class="partners partner-selected" data-target="zoom"><span>Zoom</span></p>
    <p class="partners" data-target="jabra"><span>Jabra</span></p>
    <p class="partners" data-target="epos"><span>EPOS</span></p>
    <p class="partners" data-target="dten"><span>DTEN</span></p>
    <p class="partners" data-target="ttec"><span>TTec</span></p>
</div>

保留右侧内容区块的ID不变即可，同时可以删掉侧边栏p标签上重复的ID

2. 调整CSS规则 #

默认隐藏所有未选中的合作方内容区块，修改对应CSS：

/* Partners content*/
.partners-content {
    margin-left: 80px;
    display: none; /* 取消注释，默认隐藏所有内容 */
}
/* 其余CSS保持不变 */
.selected {
    display:block;
    background-color: red;
}

3. 添加原生JS交互代码 #

在页面末尾</body>标签前添加以下JS代码即可实现需求：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有侧边栏合作方项
    const partnerTabs = document.querySelectorAll('.slide .partners');
    // 获取所有右侧内容区块
    const partnerContents = document.querySelectorAll('.partners-content');

    partnerTabs.forEach(tab => {
        // 给每个侧边栏项绑定点击事件
        tab.addEventListener('click', function() {
            // 获取当前点击项对应的内容ID
            const targetId = this.getAttribute('data-target');
            
            // 先移除所有侧边栏项的选中状态
            partnerTabs.forEach(t => t.classList.remove('partner-selected'));
            // 给当前点击项加选中样式
            this.classList.add('partner-selected');

            // 移除所有内容区块的selected类，全部隐藏
            partnerContents.forEach(content => content.classList.remove('selected'));
            // 给对应ID的内容区块加selected类，显示并应用红背景
            document.getElementById(targetId).classList.add('selected');
        })
    })
})

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