如何用jQuery/JavaScript实现Bootstrap激活标签页的显示？

看起来你遇到的问题主要是标签的href属性值和内容区域的ID不匹配，再加上选择器写法可能存在语法错误，导致切换逻辑失效。我来帮你修正并实现完整的标签页功能，分两种方案：

方案一：修正HTML语义化关联（推荐） #

首先调整你的HTML，让标签的href直接对应内容区域的id，这样逻辑更清晰，也符合语义化：

<ul class="tab-group">
  <li><a href="#t1">A</a></li>
  <li><a href="#t2">B</a></li>
  <li><a href="#t3">C</a></li>
</ul>
<div class="tab-content">
  <div id="t1">text1</div>
  <div id="t2">text2</div>
  <div id="t3">text3</div>
</div>

然后添加基础样式（让标签页有视觉反馈）：

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.tab-group li {
  margin-right: 10px;
}
.tab-group a {
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
}
.tab-group a.active {
  background-color: #eee;
  border-bottom-color: #eee;
}
.tab-content div {
  display: none;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 0 4px 4px 4px;
}
.tab-content div.active {
  display: block;
}

jQuery实现代码 #

$(document).ready(function() {
  // 初始化：显示第一个标签内容，给第一个标签添加active类
  $('.tab-content div').first().addClass('active');
  $('.tab-group a').first().addClass('active');

  // 点击标签切换
  $('.tab-group a').on('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    var targetId = $(this).attr('href'); // 获取目标内容的ID

    // 移除所有标签和内容的active类
    $('.tab-group a').removeClass('active');
    $('.tab-content div').removeClass('active');

    // 给当前点击的标签和对应内容添加active类
    $(this).addClass('active');
    $(targetId).addClass('active');
  });
});

方案二：不修改现有HTML，通过索引匹配 #

如果不想改动原HTML结构，可以通过标签和内容的索引位置来关联（第一个标签对应第一个内容块，以此类推）：

jQuery实现代码 #

$(document).ready(function() {
  // 初始化
  $('.tab-content div').hide().first().show();
  $('.tab-group a').first().addClass('active');

  $('.tab-group a').on('click', function(e) {
    e.preventDefault();
    var index = $(this).parent('li').index(); // 获取当前标签的索引

    $('.tab-group a').removeClass('active');
    $(this).addClass('active');

    $('.tab-content div').hide().eq(index).show();
  });
});

原生JavaScript实现 #

如果不想依赖jQuery，用原生JS也能实现：

document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.tab-group a');
  const contents = document.querySelectorAll('.tab-content div');

  // 初始化
  tabs[0].classList.add('active');
  contents[0].classList.add('active');

  tabs.forEach((tab, index) => {
    tab.addEventListener('click', function(e) {
      e.preventDefault();

      // 移除所有active类
      tabs.forEach(t => t.classList.remove('active'));
      contents.forEach(c => c.classList.remove('active'));

      // 添加当前active类
      this.classList.add('active');
      contents[index].classList.add('active');
    });
  });
});

关键注意点 #

• 一定要阻止标签的默认跳转行为（e.preventDefault()），否则页面会跳到锚点位置
• 初始化时要设置默认显示的标签和内容，保证页面加载后有内容展示
• 样式部分的active类是视觉反馈的关键，一定要添加

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