为Bootstrap标签页添加自定义按钮实现无刷新切换

你已经有正常运行的Bootstrap标签页组件，希望在内容末尾添加按钮，点击按钮就能切换到对应标签页，无需滚动到顶部，同时避免页面刷新。

解决方案 #

利用Bootstrap Tab组件的API，给每个切换按钮绑定点击事件，通过找到对应标签的触发器元素，调用show()方法实现无刷新切换。

修改后的完整代码 #

HTML（无需修改，保留原有结构）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="nav_main">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs content-tab" role="tablist" id="myTab">
        <li role="presentation" class="content-desc"><a class="desc" href="#desc" aria-controls="desc" role="tab"
            data-toggle="tab">content</a></li>
        <li role="presentation" class="content-author"><a class="author" href="#author" aria-controls="author"
            role="tab" data-toggle="tab">author</a></li>
        <li role="presentation" class="content-comment"><a class="comment" href="#comment" aria-controls="comment"
            role="tab" data-toggle="tab">comment</a></li>
        <li role="presentation" class="content-tag"><a class="tag" href="#tag" aria-controls="tag" role="tab"
            data-toggle="tab">tag</a></li>
      </ul>
      <!-- Tab panes -->
      <div class="tab-content content_main">
        <div role="tabpanel" class="tab-pane active" id="desc">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero accusantium odit illum aspernatur sit,
            laudantium tempora non odio natus deserunt iure, at inventore laborum sequi asperiores porro culpa,
            repellendus earum tenetur nobis suscipit qui? Totam fugiat illo veniam omnis provident asperiores distinctio
            cumque ab aperiam eaque recusandae labore repellat quae iure corporis eos, quas molestiae a vel neque
            numquam, quibusdam ullam similique! Nemo placeat impedit repellat, perferendis praesentium quidem quis
            exercitationem? Laboriosam impedit atque, ut praesentium nulla placeat. Alias nobis facilis voluptas non ex
            corporis qui velit adipisci sit delectus aut incidunt ut voluptate exercitationem dolor, harum doloremque
            et, rerum sed aperiam nemo. Reiciendis, et aliquid beatae, voluptatum expedita optio fuga esse
            necessitatibus cumque enim qui inventore, veniam voluptates minima neque aliquam commodi dolores accusantium
            reprehenderit laboriosam ad assumenda natus libero. Praesentium, excepturi magnam. Accusamus excepturi iusto
            modi earum. Dolorum libero id, atque sequi rem at ducimus soluta minima quam earum, eum aliquam delectus
            nostrum nihil aliquid repellendus laboriosam, aut sit. Ea saepe distinctio voluptatibus, hic molestias,
            dolore illum, nostrum voluptatem a nisi velit nam deserunt. Doloribus, quaerat? Dignissimos amet expedita
            provident dolorem qui. Qui perferendis laudantium exercitationem sit soluta sequi eligendi, molestias,
            suscipit architecto, nemo sunt perspiciatis recusandae fugit!
          </p>
          <a id="btn_author" class="all_btn" href="#author"><span class="fas fa-pencil"></span> author</a>
          <a id="btn_comment" class="all_btn" href="#comment"><span class="fas fa-comment"></span> comment</a>
          <a id="btn_tag" class="all_btn" href="#tag"><span class="fas fa-tag"></span> tag</a>
        </div>
        <div role="tabpanel" class="tab-pane" id="author">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, impedit!
          </p>
        </div>
        <div role="tabpanel" class="tab-pane" id="comment">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate fugit unde incidunt earum itaque aperiam
            nemo tenetur adipisci, ex hic.
          </p>
        </div>
        <div role="tabpanel" class="tab-pane" id="tag">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dicta repellendus doloremque voluptatum
            omnis, impedit commodi nihil ad! Dolore, alias.
          </p>
        </div>
      </div>
    </div>
</div>

CSS（无需修改，保留原有样式）

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

.nav_main .active {
  background: #6464ff;
  color: #fff;
}

.nav_main div .active {
  background: transparent;
  color: #000;
}

.content-tab {
  border: none;
}

.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;
}

.nav-tabs>li>a.comment {
  margin: 0;
  border-right: none;
  margin-right: 20px;
}

.nav-tabs>li>a.num-comment {
  border-left: none;
  padding-left: 5px;
  border-radius: 0 5px 0 0;
}

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

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

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

.all_btn {
  text-decoration: none;
  color: #f7ff00;
  background: #3568ff;
  padding: 10px 10px 12px;
  margin-right: 20px;
  border-radius: 4px;
  font-weight: bold;
}

.all_btn:hover{
  text-decoration: none;
  color: #f7ff00;
  opacity: 0.8;
}

JavaScript（新增按钮切换逻辑）

// 原有标签页初始化逻辑
const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

// 新增按钮切换标签页逻辑
const tabButtons = document.querySelectorAll('.all_btn')
tabButtons.forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault() // 阻止a标签默认跳转，避免页面刷新
    const targetTabId = this.getAttribute('href') // 获取按钮指向的标签ID
    // 找到对应标签页的触发器元素
    const targetTrigger = document.querySelector(`#myTab a[href="${targetTabId}"]`)
    if (targetTrigger) {
      const tab = new bootstrap.Tab(targetTrigger)
      tab.show() // 切换到目标标签页
    }
  })
})

// 默认激活第一个标签页
document.querySelector('#myTab > li:first-child a').click()

关键说明 #

1. 阻止默认行为：通过e.preventDefault()阻止按钮的默认跳转，避免页面刷新或锚点跳转
2. 关联标签触发器：利用按钮的href属性，匹配顶部标签栏中对应的触发器元素
3. 调用Bootstrap API：通过bootstrap.Tab实例化触发器并调用show()方法，实现和点击标签完全一致的切换效果

这样修改后，点击内容末尾的按钮就能直接切换到对应标签页，无需滚动到顶部，且不会触发页面刷新。

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