JavaScript选项卡交互效果比较

比较常用的网页交互里，JavaScript 选项卡算是老朋友了。结构清晰、功能直观，用它来展示多组信息，既省空间又挺美观。

选项卡的结构其实简单，一组按钮加一组内容面板就搞定。按钮点一下，显示对应内容，其他面板就自动隐藏。切换逻辑嘛，靠的是 DOM 操作，加上 addEventListener 监听用户点击，再用 style.display 控制显示隐藏。

代码也不复杂，像下面这样就能跑起来：

var tabs = document.querySelectorAll('.tab-button');
var panels = document.querySelectorAll('.tab-panel');

panels.forEach(p => p.style.display = 'none');
tabs.forEach(function(tab) {
  tab.addEventListener('click', function() {
    tabs.forEach(t => t.classList.remove('active'));
    panels.forEach(p => p.style.display = 'none');
this.classList.add('active');
    var index = Array.prototype.indexOf.call(tabs, this);
    panels[index].style.display = 'block';
  });
});

这套写法比较适合轻量项目。如果你用 Bootstrap 或 jQuery UI，那更简单了，基本就是堆几个 class 就自动切了，还能直接加动画、响应式、无障碍支持。

不过也要注意：内容切换时别忘了加上 aria 属性、键盘支持这些细节，是做管理后台或面向大众用户的时候。

如果你想试试不同风格的实现，可以看看这些：

• jQuery 选项卡，适合老项目
• JS + CSS 静态选项卡，纯前端方案
• 使用 ViewPager 实现选项卡，移动端开发也用得上

如果你正在搭建内容展示模块，或者后台面板，选项卡是个还不错的选择。手写代码自己掌控，库框架集成快，各有各的优势，主要看你项目怎么选。