Material Design风格实用Tabs选项卡

PetitQ Tab选项卡 2018-10-24 1.88K 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 选项卡

已有 469 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

Tab选项卡

Material Design风格实用Tabs选项卡

HTML 结构：

CSS 样式：

JavaScript 部分：

Material Design 风格实用 Tabs 选项卡

相关文章

跨浏览器Tabs选项卡jQuery插件

jQuery + CSS3堆叠式Tab选项卡

Bootstrap Tabs 选项卡美化设计

发表回复取消回复

热销模板

Tab选项卡

HTML 结构：

CSS 样式：

JavaScript 部分：

Material Design 风格实用 Tabs 选项卡

相关文章

发表回复 取消回复

热销模板

发表回复取消回复