Bootstrap 3如何阻止激活标签页点击后关闭

问题分析 #

你遇到的问题是Bootstrap 3默认允许点击已激活的标签页来取消其激活状态，导致没有标签页选中。你之前的代码无效是因为选择器错误——.nav-tabs.active选中的是整个标签栏容器，而非激活的标签页项。

可行解决方案 #

方法一：JavaScript事件拦截 #

通过事件委托全局监听所有标签页点击，判断目标是否为已激活标签页，若是则阻止默认行为：

$(document).on('click', '.nav-tabs li.active a', function(e) {
    e.preventDefault();
    e.stopPropagation();
});

• 用$(document).on()实现事件委托，兼容动态生成的标签页
• 选择器.nav-tabs li.active a精准定位到激活状态的标签页链接
• e.preventDefault()阻止链接默认跳转，e.stopPropagation()阻止事件冒泡触发Bootstrap的标签切换逻辑

方法二：CSS增强体验 #

配合CSS给激活标签页添加不可点击的视觉反馈，让用户直观感知：

.nav-tabs li.active a {
    pointer-events: none;
    cursor: default;
    opacity: 0.7; /* 可选：添加半透明效果强化不可点击状态 */
}

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