Material Tabs

index.html

<ul>
  <li><a data-pos="0" class="active" href="#tab1">tab 1</a></li>
  <li><a data-pos="1" href="#tab2">tab 2</a></li>
  <li><a data-pos="2" href="#tab3">tab 3</a></li>
  <li><a data-pos="3" href="#tab4">tab 4</a></li>
</ul>
<div class="slider"></div>

Material Tabs.markdown

Material Tabs

A Pen by Brian Han on CodePen.

License.

script.babel

const tabs = document.querySelectorAll('a');
const numberOfTabs = tabs.length;
const tabsContainer = document.querySelector('ul');
const slider = document.querySelector('.slider');

slider.style.width = `calc(100%/${numberOfTabs})`;

tabsContainer.addEventListener('click', function(event) {

  Array.prototype.forEach.call(tabs, function(tab) {
    const isActive = tab.classList.contains('active');
    const isSelf = event.target;
    
    tab.classList.remove('active');

    if (isSelf && !isActive) {
      isSelf.classList.add('active');
      slider.style.transform = `translateX(${isSelf.dataset.pos * 100}%)`;
    }
  });
});

style.scss

* { 
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

ul {
  background-color: orange;
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  text-align: center;
  flex: 1;
}

a {
  background-color: salmon;
  display: inline-block;
  text-decoration: none;
  font-family: sans-serif;
  width: 100%;
  color: teal;
  padding: 1rem 0;
}

.slider {
  background-color: blue;
  height: 5px;
  display: block;
  transition: transform 200ms;
}