首页
后端开发
C#
JavaScript超简洁选项卡组件

JavaScript超简洁选项卡组件

0 次浏览 0 条评论
asp
asp

选项卡切换的代码千千万，但太长太绕的我是真看不下去。今天分享一段超简洁的 JS 选项卡代码，逻辑清楚，写法干净，新手一眼就懂，老手用起来也爽。几行代码，点哪就显示哪，响应也快，适合各种小页面、后台面板场景。

结构也蛮简单，ul做导航，div装内容区，配合基本的display切换就搞定。你甚至可以扩展点动画啥的，体验更顺滑。下面这段就实用：

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');


tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => t.classList.remove('active'));
    contents.forEach(c => c.style.display = 'none');
    tab.classList.add('active');
    contents[index].style.display = 'block';
  });
});

想加点花样？你可以看看这几个：

如果你不想折腾一堆框架，又想快速搞定选项卡切换，那这个方案真挺香的。样式你可以随意定制，逻辑清晰，可维护性也不错，适合长期用。

asp 文件大小：2.09KB