JavaScript带前后切换按钮的选项卡功能
带左右切换按钮的选项卡功能，挺适合内容多又不想搞滚动条的场景。你点一下左边，就能切到前一个 tab，右边一样能切到后一个，交互直观，响应也快。
JavaScript 的事件绑定得比较巧，用了个变量记录当前 tab 索引，每次点击更新下就能跳转。结构也简单，一排 tab 外加两个按钮，样式自己稍微调一下就挺好看。
这种效果在移动端尤其实用，空间小但又内容多，像H5 页面、商品展示页、或者后台管理系统都蛮适合。而且如果你熟 jQuery，写起来会更轻松，用$('.tab-btn-next')一行搞定点击事件。
想扩展功能也方便，比如加个滑动切换，加点动画啥的，整体挺灵活的。你可以参考一些不错的实现，比如下面这些：
JavaScript 选项卡切换实现、 H5 选项卡切换实现、 layui Tab 选项卡切换跟随特效，这些文章讲得还蛮清楚的，代码也能直接上手用。
如果你页面 tab 比较多，又不想一股脑全铺开，不妨试试这种切换方式，体验感确实提升不少。
文件大小：4.38KB
评论区