如何用jQuery/JS实现点击Tab动态切换对应内容？

当然可以搞定这个Tab切换的需求！不管用jQuery还是原生JS都能轻松实现，我给你准备了两种方案，你看着选：

第一步：先加基础CSS样式 #

首先我们需要用CSS默认隐藏所有Tab内容，只显示当前选中的那个：

/* 默认隐藏所有Tab内容区块 */
.ibm-tabs-content {
    display: none;
}

/* 给激活状态的内容区块设置显示 */
.ibm-tabs-content.active {
    display: block;
}

方案一：用jQuery实现 #

如果你已经引入了jQuery库，直接用下面的代码就行：

$(document).ready(function() {
    // 页面加载完成后，先显示默认选中的Tab内容
    $('.ibm-tabs a[aria-selected="true"]').each(function() {
        const targetContent = $(this).attr('href');
        $(targetContent).addClass('active');
    });

    // 给每个Tab绑定点击事件
    $('.ibm-tabs a').on('click', function(e) {
        e.preventDefault(); // 阻止锚点的默认跳转行为
        
        // 先把所有Tab的选中状态和内容的激活状态都去掉
        $('.ibm-tabs a').attr('aria-selected', 'false');
        $('.ibm-tabs-content').removeClass('active');
        
        // 给当前点击的Tab设置选中状态，对应内容设置激活状态
        $(this).attr('aria-selected', 'true');
        const targetContent = $(this).attr('href');
        $(targetContent).addClass('active');
    });
});

方案二：用原生JavaScript实现 #

如果不想依赖jQuery，原生JS也能实现同样的效果：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有Tab链接和对应的内容区块
    const tabLinks = document.querySelectorAll('.ibm-tabs a');
    const tabContents = document.querySelectorAll('.ibm-tabs-content');

    // 初始化：显示默认选中的Tab内容
    tabLinks.forEach(link => {
        if (link.getAttribute('aria-selected') === 'true') {
            const targetId = link.getAttribute('href');
            document.querySelector(targetId).classList.add('active');
        }
    });

    // 给每个Tab绑定点击事件
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 重置所有Tab和内容的状态
            tabLinks.forEach(l => l.setAttribute('aria-selected', 'false'));
            tabContents.forEach(content => content.classList.remove('active'));
            
            // 激活当前点击的Tab和对应的内容
            this.setAttribute('aria-selected', 'true');
            const targetId = this.getAttribute('href');
            document.querySelector(targetId).classList.add('active');
        });
    });
});

简单说下逻辑 #

1. 一开始用CSS把所有内容都藏起来，只有带active类的才显示；
2. 页面加载时，找到默认选中的Tab（就是那个aria-selected="true"的），把它对应的内容加上active类，让它显示出来；
3. 点击其他Tab时，先把所有Tab的选中状态和内容的激活状态都清空，再给当前点击的Tab和内容设置激活状态，这样就实现了点击切换的效果。

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