js实现下划线跟随选择卡滑动

在JavaScript中实现选择卡的下划线滑动效果是一种常见的交互设计，可以提升用户体验，使用户清晰地看到当前所选的选项。选择卡通常由<;div>;标签表示，下划线作为一个独立的元素，其宽度根据选中选项变化。通过HTML、CSS和JavaScript结合，可以实现该功能。

在HTML中，选择卡结构如下：

<div class='\"tabs\"'>

  <div class='\"tab\"' data-tab='\"content1\"'>选项1div>

  <div class='\"tab\"' data-tab='\"content2\"'>选项2div>

  <div class='\"tab\"' data-tab='\"content3\"'>选项3div>

  '\"underline\"'>

div>

CSS样式设置选择卡水平排列，下划线宽度有平滑过渡效果：

.tabs { display: flex; }

.tab { flex: 1; cursor: pointer; }

.underline { height: 2px; background-color: #000; transition: width 0.3s; }

JavaScript部分通过监听选择卡点击事件，更新下划线宽度，显示对应内容区域：

document.querySelectorAll('.tab').forEach(tab =>; {

  tab.addEventListener('click', function() {

    document.querySelectorAll('.tab').forEach(t =>; t.classList.remove('active'));

    document.querySelector('.underline').style.width = '0';

    this.classList.add('active');

    const width = this.clientWidth;

    document.querySelector('.underline').style.width = width + 'px';

    const contentId = this.dataset.tab;

    const content = document.getElementById(contentId);

    content.style.display = 'block';

  });

});

默认选项的初始化代码：

window.onload = function() {

  const defaultTab = document.querySelector('.tab');

  defaultTab.click();

};