将样式添加到标准jquery选项卡上的活动选项卡

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <<li><a href="#tab3">Tab 3</a></li>
  </ul>
  
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <!-- Tab 1 content -->
    </div>
    <div id="tab2" class="tab">
      <!-- Tab 2 content -->
    </div>
    <div id="tab3" class="tab">
      <!-- Tab 3 content -->
    </div>
  </div>
</div>

.tab-links li.active a {
  background-color: #f00;
  color: #fff;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

$(document).ready(function() {
  // 默认显示第一个选项卡
  $('.tab-content .tab:first').addClass('active');
  $('.tab-links li:first').addClass('active');

  // 点击选项卡切换
  $('.tab-links li').click(function(e) {
    var tabId = $(this).find('a').attr('href');

    // 移除所有选项卡的活动状态
    $('.tab-links li').removeClass('active');
    $('.tab-content .tab').removeClass('active');

    // 添加活动状态到当前选项卡
    $(this).addClass('active');
    $(tabId).addClass('active');

    e.preventDefault();
  });
});