jquery tab选项卡带下划线

<div class="tabs">
  <ul class="tab-links">
    <li><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">
      <p>Content for Tab 1 goes here.</p>
    </div>
    <div id="tab2" class="tab">
      <p>Content for Tab 2 goes here.</p>
    </div>
    <div id="tab3" class="tab">
      <p>Content for Tab 3 goes here.</p>
    </div>
  </div>
</div>

.tabs {
  position: relative;
}

.tab-links li {
  display: inline-block;
  margin-right: 10px;
}

.tab-links a {
  text-decoration: none;
  padding-bottom: 5px;
  position: relative;
}

.tab-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: blue;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.tab-links a.active::after {
  transform: scaleX(1);
}

.tab-content .tab {
  display: none;
}

.tab-content .tab.active {
  display: block;
}

$(document).ready(function() {
  $('.tab-links a').on('click', function(e) {
    e.preventDefault();
    var target = $(this).attr('href');

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

    $('.tab').removeClass('active');
    $(target).addClass('active');
  });
});