jquery移动端左右滑动导航

在移动端设计中，左右滑动导航是一种普遍的设计方式。它可以让用户快速浏览不同页面的内容，并且增强了用户体验。通过使用jQuery，我们可以很容易地实现这个功能。

  $(function() {
      var nav = $('.nav-tabs-wrapper');
      var indicator = $('#indicator');
      var sectionPositions = [];
      var activePosition = 0;

      nav.find('.nav-tab').each(function() {
          var position = $($(this).data('section')).offset().left;
          sectionPositions.push(position);

          if ($(this).hasClass('active')) {
              activePosition = position;
          }
      });

      indicator.css('left',activePosition);

      nav.on('click','.nav-tab',function() {
          var position = sectionPositions[$(this).index()];
          indicator.animate({
              'left': position
          });
          nav.find('.nav-tab').removeClass('active');
          $(this).addClass('active');
      });
  });

上面的jQuery代码将给定的导航标签包装在nav-tabs-wrapper div元素中，并且标签内容与相应的页面部分相关联。当用户点击标签时，页面将平滑地滑动到相应的部分，并且指示器将移动到正确的位置，从而突出显示当前所在部分。这个代码片段可以在任何移动端设计中使用，帮助用户更轻松地浏览不同的页面部分。