jQuery移动端可点击滑动导航

可点击的顶部导航+自动滑动切换，挺适合移动端的轻应用页面。用的还是熟悉的 jQuery，逻辑简单，动效流畅，体验还不错。点导航项能直接跳转，滑动切换也顺手，适合做选项卡、内容页切换这类场景。

移动端的导航嘛，主要难点还是在手势交互和空间有限这两块。这套方案就把导航和滑动整合到一起了，既能点也能滑，挺省事的。实现上大多是 touchstart + touchmove 搭配 animate()，要是你熟 jQuery，基本一眼就能看懂。

结构也清爽，通常是 ul 列表装菜单项，滑动区域是 div.content 之类的。像下面这种滑动逻辑：

$('.nav-item').on('click', function() {
  var index = $(this).index();
  $('.content').animate({left: -index * screenWidth}, 300);
});

是不是眼熟？配点媒体查询，再做下 响应式布局，手机和平板都能用。

如果你考虑做个 类原生 App 的 Web 页，比如活动页、商城、后台的移动端版，这类导航交互真是刚刚好。还能配合点 Swiper 或 tab 切换 组件，一起用效果更佳。

小建议：

• 手势交互里加个 preventDefault()，防止页面乱滚
• 用 requestAnimationFrame 替代 animate() 时动画更丝滑
• 考虑下 可访问性，按钮别忘加 aria 属性

资源打包在 texiao7230_1560680929，里面有 index.html、style.css 和主逻辑的 main.js，直接跑看看效果也行。用惯了 jQuery 的你会觉得，这东西还是挺顺手的。