Material Design风格实用Tabs选项卡

这是一款非常实用的Material Design风格Tabs选项卡特效。该Tabs选项卡使用扁平化设计风格，Tabs点击时带有点击波特效，并且选项卡的高度会随内容而改变。

使用方法

HTML结构

该Tabs选项卡的HTML结构如下：ul无序列表是选项卡的Tab，nav元素是选项卡的左右箭头导航按钮。div.nav-content是选项卡的内容，它通过tab-id属性和Tabs关联。

<!--Tabs-->
<ul>
  <li class="active"><a href="#tab-1" tab-id="1" ripple="ripple" ripple-color="#FFF">Tab 1</a></li>
  <li><a href="#tab-2" tab-id="2" ripple="ripple" ripple-color="#FFF">Tab 2</a></li>
  <li><a href="#tab-3" tab-id="3" ripple="ripple" ripple-color="#FFF">Tab 3</a></li>
  <li><a href="#tab-4" tab-id="4" ripple="ripple" ripple-color="#FFF">Tab 4</a></li>
  <li><a href="#tab-5" tab-id="5" ripple="ripple" ripple-color="#FFF">Tab 5</a></li>
</ul>
<!--箭头导航-->
<nav class="tabs-nav">
  <i id="prev" ripple="ripple" ripple-color="#FFF" class="material-icons"></i>
  <i id="next" ripple="ripple" ripple-color="#FFF" class="material-icons"></i>
</nav>
<!--选项卡内容-->
<div class="tabs-content">
  <div tab-id="1" class="tab active">......</div>
</div>            
              

CSS样式

该Tabs选项卡的按钮点击波特效的CSS样式如下：

[ripple] {
  z-index: 1;
  position: relative;
  overflow: hidden;
}
[ripple] .ripple {
  position: absolute;
  background: #FFFFFF;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  -webkit-animation: ripple 1.6s;
          animation: ripple 1.6s;
}

@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(40);
            transform: scale(40);
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(40);
            transform: scale(40);
    opacity: 0;
  }
}               
              

JavaScript

该Tabs选项卡使用下面的jQuery代码来完成选项卡的切换和按钮点击波特效的生成。

$(document).ready(function () {
  var activePos = $('.tabs-header .active').position();
  function changePos() {
      activePos = $('.tabs-header .active').position();
      $('.border').stop().css({
          left: activePos.left,
          width: $('.tabs-header .active').width()
      });
  }
  changePos();
  var tabHeight = $('.tab.active').height();
  function animateTabHeight() {
      tabHeight = $('.tab.active').height();
      $('.tabs-content').stop().css({ height: tabHeight + 'px' });
  }
  animateTabHeight();
  function changeTab() {
      var getTabId = $('.tabs-header .active a').attr('tab-id');
      $('.tab').stop().fadeOut(300, function () {
          $(this).removeClass('active');
      }).hide();
      $('.tab[tab-id=' + getTabId + ']').stop().fadeIn(300, function () {
          $(this).addClass('active');
          animateTabHeight();
      });
  }
  $('.tabs-header a').on('click', function (e) {
      e.preventDefault();
      var tabId = $(this).attr('tab-id');
      $('.tabs-header a').stop().parent().removeClass('active');
      $(this).stop().parent().addClass('active');
      changePos();
      tabCurrentItem = tabItems.filter('.active');
      $('.tab').stop().fadeOut(300, function () {
          $(this).removeClass('active');
      }).hide();
      $('.tab[tab-id="' + tabId + '"]').stop().fadeIn(300, function () {
          $(this).addClass('active');
          animateTabHeight();
      });
  });
  var tabItems = $('.tabs-header ul li');
  var tabCurrentItem = tabItems.filter('.active');
  $('#next').on('click', function (e) {
      e.preventDefault();
      var nextItem = tabCurrentItem.next();
      tabCurrentItem.removeClass('active');
      if (nextItem.length) {
          tabCurrentItem = nextItem.addClass('active');
      } else {
          tabCurrentItem = tabItems.first().addClass('active');
      }
      changePos();
      changeTab();
  });
  $('#prev').on('click', function (e) {
      e.preventDefault();
      var prevItem = tabCurrentItem.prev();
      tabCurrentItem.removeClass('active');
      if (prevItem.length) {
          tabCurrentItem = prevItem.addClass('active');
      } else {
          tabCurrentItem = tabItems.last().addClass('active');
      }
      changePos();
      changeTab();
  });
  $('[ripple]').on('click', function (e) {
      var rippleDiv = $('<div class="ripple" />'), 
        rippleOffset = $(this).offset(), 
        rippleY = e.pageY - rippleOffset.top, 
        rippleX = e.pageX - rippleOffset.left, 
        ripple = $('.ripple');
      rippleDiv.css({
          top: rippleY - ripple.height() / 2,
          left: rippleX - ripple.width() / 2,
          background: $(this).attr('ripple-color')
      }).appendTo($(this));
      window.setTimeout(function () {
          rippleDiv.remove();
      }, 1500);
  });
});