タブパネル - Javascript

ファイル

Javascript
Python
Ruby

JAVASCRIPT

PYTHON

RUBY

複数設置可能なタブパネルです。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <main>
    <div class="tab-group">
      <!--タブ-->
      <ul class="tab-list clearfix">
        <li class="tab active" data-tab="0">Javascript</li>
        <li class="tab" data-tab="1">Python</li>
        <li class="tab" data-tab="2">Ruby</li>
      </ul><!-- /div.tab-list --> 
  
      <!--タ表示するコンテンツ-->
      <div class="tab-contents">
        <div class="tab-content active">JAVASCRIPT</div>
        <div class="tab-content">PYTHON</div>
        <div class="tab-content">RUBY</div>
      </div><!-- /div.tab-contents --> 
    </div><!-- /div.tab-group -->
  </main>
</body>
</html>

javascript.js

window.addEventListener('load', () => {
  const tabs = document.getElementsByClassName('tab');

  for (i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener("click", function() {
      let parent = this.parentNode;

      Array.from(parent.children).forEach(function(e){
        e.classList.remove("active");
      })

      this.classList.add("active")

      Array.from(parent.nextElementSibling.children).forEach(function(e){
        e.classList.remove("active")
      })
      parent.nextElementSibling.children[this.dataset.tab].classList.add("active")
    });
  }
});

style.css

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
ul {
  padding: 10px;
}
li {
  list-style: none;
}
a, a:hover, a:visited{
  text-decoration: none; 
  color: inherit;
}
.tab-list {
  margin: 0;
  padding: 0;
}
.tab {
  float: left;
  padding: 4px 20px;
}
.tab.active{
  background-color: gray;
  color: white;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
  padding: 20px;
  border: 1px solid gray;
}