在JavaScript中实现选择卡的下划线滑动效果是一种常见的交互设计，可以提升用户体验，使用户清晰地看到当前所选的选项。选择卡通常由

标签表示，下划线作为一个独立的元素，其宽度根据选中选项变化。通过HTML、CSS和JavaScript结合，可以实现该功能。

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


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

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

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

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

  <span class='\"underline\"'></span>

</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 =&gt; {

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

    document.querySelectorAll('.tab').forEach(t =&gt; 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();

};

文件列表

js实现下划线跟随选择卡滑动.rar (预估有个3文件)
js实现下划线跟随选择卡滑动
hua.css 999B
hua.js 1KB
hua.html 1KB