Material Design风格实用Tabs选项卡

PetitQ Tab选项卡 2018-10-24 1.90K 0 0

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

HTML 结构：

该 Tabs 选项卡的 HTML 结构如下：ul 无序列表是选项卡的 Tab，nav 元素是选项卡的左右箭头导航按钮。div.nav-content 是选项卡的内容，它通过 tab-id 属性和 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);
```
```
  });
```
```
});
```

Material Design 风格实用 Tabs 选项卡

已有 475 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Tab选项卡

Material Design风格实用Tabs选项卡

HTML 结构：

CSS 样式：

JavaScript 部分：

Material Design 风格实用 Tabs 选项卡

相关文章

CSS3仿Windows phone加载动画特效

可改变背景颜色的Tab菜单插件 jQuery 特效

易于使用jQuery Tabs选项卡插件

发表回复取消回复

热销模板

Tab选项卡

HTML 结构：

CSS 样式：

JavaScript 部分：

Material Design 风格实用 Tabs 选项卡

相关文章

发表回复 取消回复

热销模板

发表回复取消回复