Bootstrap Nav-Tab自定义异常：WordPress下点击切换样式失效

问题根源 #

1. 代码冗余：为每个tab项单独编写重复的点击事件，完全没必要。
2. DOM选择错误：脚本里$(this).parent()选中的是外层<ul>，把active类加到了列表容器上，导致整个ul背景变化，而非目标tab项。
3. Bootstrap属性不兼容：Bootstrap 5中tab切换的属性是data-bs-toggle="tab"，而非旧版的data-toggle="tab"，原生切换逻辑未生效。
4. 初始激活状态缺失：页面加载时没给首个tab项添加active类，不符合需求。

修正后的完整代码 #

1. HTML调整

修复Bootstrap 5的tab属性，给首个tab项添加active类：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
    <div class="nav_main">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs content-tab" role="tablist">
            <li role="presentation" class="content-desc active"><a class="desc active" href="#desc" aria-controls="desc"
                    role="tab" data-bs-toggle="tab">content</a></li>
            <li role="presentation" class="content-author"><a class="author" href="#author" aria-controls="author"
                    role="tab" data-bs-toggle="tab">author</a></li>
            <li role="presentation" class="content-comment"><a class="comment" href="#comment"
                    aria-controls="comment" role="tab" data-bs-toggle="tab">comment</a></li>
            <li role="presentation" class="content-tag"><a class="tag" href="#tag" aria-controls="tag" role="tab"
                    data-bs-toggle="tab">tag</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content content_main">
            <div role="tabpanel" class="tab-pane active" id="desc">
                desc desc desc desc desc desc desc
            </div>
            <div role="tabpanel" class="tab-pane" id="author">
                author author author author author
            </div>
            <div role="tabpanel" class="tab-pane" id="comment">
                comment comment comment comment comment comment
            </div>
            <div role="tabpanel" class="tab-pane" id="tag">
                tag tag tag tag tag tag
            </div>
        </div>
    </div>
</div>

2. CSS修正

修改激活状态的样式选择器，精准控制当前tab的背景：

.content_main {
    width: 650px;
    border: 1px solid #00000033;
    text-align: justify;
    margin: 0px 5px 10px 5px;
    padding: 20px;
    border-radius: 5px;
    line-height: 35px;
}

/* 激活状态样式：作用于当前选中的tab项 */
.nav_main .nav-tabs li.active a {
    background: #b421f3;
    color: #fff; /* 可选：优化文字对比度 */
}

.content-tab {
    border: none;
    margin-top: 20px;
}

.nav-tabs>li>a {
    background: #e2e2e2;
    border: 1px solid #00000033;
    box-shadow: 0 -2px 0 #2196f3;
    padding: 14px;
    color: #000;
    margin: 0px 15px 0px 5px;
    border-radius: 5px 5px 0 0;
}

.content-tab a:hover {
    text-decoration: none;
}

.content-comment {
    margin-right: -10px;
}

3. JS简化与修复

利用Bootstrap内置事件自动维护激活状态，去掉重复代码：

// 监听tab切换完成事件，同步更新active类
$('.nav_main .nav-tabs').on('shown.bs.tab', function (e) {
    // 移除所有tab项的active类
    $(this).find('li').removeClass('active');
    // 给当前点击的tab项添加active类
    $(e.target).closest('li').addClass('active');
});

关键说明 #

• 必须引入Bootstrap 5的JS文件（bootstrap.bundle.min.js），确保原生tab切换功能正常运行。
• 激活样式直接作用于li.active a，精准定位当前选中的tab项。
• 借助Bootstrap内置的shown.bs.tab事件，无需手动编写复杂的切换逻辑，避免冲突且代码简洁。

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