Bootstrap激活态Nav-Tab点击JS按钮后重置至首个标签的问题求助

这个问题我之前也碰到过！其实是事件冒泡或者意外触发了Bootstrap标签页的切换逻辑，给你几个简单靠谱的解决方法：

方法1：内联事件中返回false #

直接在按钮的onclick里调用函数后返回false，这样能同时阻止默认行为和事件冒泡，切断触发标签页切换的链路：

<button class="btn btn-success btn-s" onclick="seoRandom(); return false;"> 
  <i class="fa fa-refresh"></i>
</button>

方法2：在JS函数中显式阻止事件传播 #

修改你的seoRandom函数，让它接收事件参数，然后主动阻止默认行为和冒泡：

function seoRandom(event) {
  // 你原本的填充textarea代码
  
  // 阻止事件向上冒泡和默认行为
  event.preventDefault();
  event.stopPropagation();
}

然后更新按钮的调用，把事件对象传进去：

<button class="btn btn-success btn-s" onclick="seoRandom(event)"> 
  <i class="fa fa-refresh"></i>
</button>

方法3：使用事件监听绑定（更规范的写法） #

去掉内联的onclick，给按钮加个唯一ID，然后用JS绑定事件，这样代码更易维护，也能避免内联事件的潜在问题：

<button id="seo-refresh-btn" class="btn btn-success btn-s"> 
  <i class="fa fa-refresh"></i>
</button>

// 绑定点击事件
document.getElementById('seo-refresh-btn').addEventListener('click', function(event) {
  // 先阻止事件冒泡和默认行为
  event.preventDefault();
  event.stopPropagation();
  // 调用你的填充函数
  seoRandom();
});

问题根源说明 #

虽然<button>本身没有跳转页面的默认行为，但你的按钮在标签页容器内部，点击事件会向上冒泡到Bootstrap的标签页控制元素，误触发了标签页切换的逻辑，导致自动跳转到第一个标签页。上面的方法都是通过切断事件传递链来解决这个问题。

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