テック

タブ（Tab）を自作する方法

2023年8月19日 by single コメントはまだありません

タブ（Tab）を自作する方法

今回は、タブ（Tab）を自作してみます。

自作するにあたり以下のサイトを参考にしています。

シンプル版（アニメ効果なし）

まず、最初に一番シンプルなタブを紹介します。

サンプル

タブ内のメニューボタンをクリックしてください

ロンドン

ロンドンはイギリスの首都です。

パリ

パリはフランスの首都です。

東京

東京は日本の首都です。

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8" />
  <style>
  body {font-family: Arial;}
  /* Style the tab */
  .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  /* Style the buttons inside the tab */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
  }
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }
  </style>
</head>
<body>
  <h2>Tabs</h2>
  <p>タブ内のメニューボタンをクリックしてください</p>
  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')">ロンドン</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">パリ</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">東京</button>
  </div>
  <div id="London" class="tabcontent">
    <h3>ロンドン</h3>
    <p>ロンドンはイギリスの首都です。</p>
  </div>
  <div id="Paris" class="tabcontent">
    <h3>パリ</h3>
    <p>パリはフランスの首都です。</p> 
  </div>
  <div id="Tokyo" class="tabcontent">
    <h3>東京</h3>
    <p>東京は日本の首都です。</p>
  </div>
  <script>
    function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
    }
  </script>
</body>
</html>

実装方法

HTMLマークアップ

まず、タブ領域を生成します。タブ領域にはclass『tab』を指定してください。

<div class="tab">
  ...
</div>

次にタブリンクを作ります。オブジェクトは「button」です。

cssクラスには『tablinks』、クリックイベントには『openCity()』を呼び出してください。ファンクション『openCity()』の第１引数には、event、第２引数にはタブ内容領域のIDを指定してください。

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">ロンドン</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">パリ</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">東京</button>
</div>

次にタブの内容領域を定義します。各タブ領域にはclass『tabcontent』を指定してください。


<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">ロンドン</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">パリ</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">東京</button>
</div>

<div id="London" class="tabcontent">
  <h3>ロンドン</h3>
  <p>ロンドンはイギリスの首都です。</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>パリ</h3>
  <p>パリはフランスの首都です。</p> 
</div>
<div id="Tokyo" class="tabcontent">
  <h3>東京</h3>
  <p>東京は日本の首都です。</p>
</div>
Javascriptソース

サイトに、ファンクション『openCity();』を定義してください。

<script>
  function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }
</script>

デモ

フェードイン版（アニメ効果あり）

サンプル

タブ内のメニューボタンをクリックしてください

ロンドン

ロンドンはイギリスの首都です。

パリ

パリはフランスの首都です。

東京

東京は日本の首都です。

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8" />
  <style>
  body {font-family: Arial;}
  /* Style the tab */
  .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  /* Style the buttons inside the tab */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
  }
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    animation: fadeEffect 1s; /* フェード効果：１秒 */
  }
  /* Go from zero to full opacity */
  @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  </style>
</head>
<body>
  <h2>Tabs（フェード効果）</h2>
  <p>タブ内のメニューボタンをクリックしてください</p>
  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">ロンドン</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">パリ</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">東京</button>
  </div>
  <div id="London" class="tabcontent">
    <h3>ロンドン</h3>
    <p>ロンドンはイギリスの首都です。</p>
  </div>
  <div id="Paris" class="tabcontent">
    <h3>パリ</h3>
    <p>パリはフランスの首都です。</p> 
  </div>
  <div id="Tokyo" class="tabcontent">
    <h3>東京</h3>
    <p>東京は日本の首都です。</p>
  </div>
  <script>
    function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
    }
  </script>
  <script>
  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();
  </script>
</body>
</html>

実装方法

効果（アニメーション）を設定するには？

タブ切り替え時、効果を設定するにはスタイルシートで効果を定義してください。

まず、フェード効果をスタイルシートで定義します。

<style>
/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
</style>

次に定義した効果をスタイルシートのクラスに適用します。

<style>
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  animation: fadeEffect 1s; /* フェード効果：１秒 */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
</style>

スタイルシートの「animation」を利用し、値に、定義した効果を設定します。

定義では『透明度を０から１に１秒間かけて、変更する』という定義になります。

タブを初期選択するには？

タブを初期表示で選択状態にするには、対象タブのクリック処理を呼び出してください。

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">ロンドン</button>
  ...
</div>
<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

新しいタブでプレビュー

デモ

閉じるボタンあり

サンプル

右上端にあるXボタンをクリックすると現在のタブが閉じます

× ロンドン

ロンドンはイギリスの首都です。

× パリ

パリはフランスの首都です。

× 東京

東京は日本の首都です。

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8" />
  <style>
    body {font-family: Arial;}
    /* Style the tab */
    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }
    /* Style the buttons inside the tab */
    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }
    /* Change background color of buttons on hover */
    .tab button:hover {
      background-color: #ddd;
    }
    /* Create an active/current tablink class */
    .tab button.active {
      background-color: #ccc;
    }
    /* Style the tab content */
    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }
    /* Style the close button */
    .topright {
      float: right;
      cursor: pointer;
      font-size: 28px;
    }
    .topright:hover {color: red;}
  </style>
</head>
<body>

  <h2>Tabs</h2>
  <p>右上端にあるXボタンをクリックすると現在のタブが閉じます</p>
  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">ロンドン</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">パリ</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">東京</button>
  </div>
  <div id="London" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
      <h3>ロンドン</h3>
      <p>ロンドンはイギリスの首都です。</p>
  </div>

  <div id="Paris" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
      <h3>パリ</h3>
      <p>パリはフランスの首都です。</p> 
  </div>

  <div id="Tokyo" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
      <h3>東京</h3>
      <p>東京は日本の首都です。</p>
  </div>
  <script>
    function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
    }
    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
  </script>
</body>
</html>

実装方法

閉じるを設定するには？
<div id="London" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
    <h3>ロンドン</h3>
    <p>ロンドンはイギリスの首都です。</p>
</div>

class『topright』を設定したspanに『』を設定すると✖アイコンが表示され、かつ、クリックすると非表示になる処理を設定することで閉じるボタンを実装できます。

デモ

タブをライブラリ化してみた

最後に、サンプルのタブを実装してくれるクラスを自作してみました。

サンプル

右上端にあるXボタンをクリックすると現在のタブが閉じます

× ロンドン

ロンドンはイギリスの首都です。

× パリ

パリはフランスの首都です。

× 東京

東京は日本の首都です。

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://www.single-life.tokyo/demo/MyTab.css"  />
</head>
<body>
  <h2>Tabs</h2>
  <p>右上端にあるXボタンをクリックすると現在のタブが閉じます</p>
  <div class="tab">
    <button class="tablinks" tab="London">ロンドン</button>
    <button class="tablinks" tab="Paris">パリ</button>
    <button class="tablinks" tab="Tokyo">東京</button>
  </div>
  <div id="London" class="tabcontent">
    <span class="topright">&times</span>
      <h3>ロンドン</h3>
      <p>ロンドンはイギリスの首都です。</p>
  </div>
  <div id="Paris" class="tabcontent">
    <span class="topright">&times</span>
      <h3>パリ</h3>
      <p>パリはフランスの首都です。</p> 
  </div>
  <div id="Tokyo" class="tabcontent">
    <span class="topright">&times</span>
      <h3>東京</h3>
      <p>東京は日本の首都です。</p>
  </div>
  <script src="https://www.single-life.tokyo/demo/MyTab.js"></script>
  <script type="text/javascript">
    var tab = new MyTab(".tab .tablinks",{});
  </script>
</body>
</html>

CSSファイル（MyTab.css）

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Style the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}
.topright:hover {color: red;}

JSファイル（MyTab.js）

class MyTab {
  constructor(selector,options) {


    this.selector = selector || '.tab .tablinks';
    this.closebtnSelector = options.closebtnSelector || '.tabcontent span.topright';
    this.tabContentClass =  options.tabContentClass || 'tabcontent';
    this.tabLinkClass = options.tabLinkClass || 'tablinks';
    this.activeClass = options.activeClass || 'active';

    /* 初期化処理実行 */
    this.init();
  }

  /* ラベルおよびドット設定 */
  init() {
    var tabs = document.querySelectorAll(this.selector);
    var nCount = tabs.length;
    if ( nCount > 0 ) {
      for ( var i=0; i < nCount; i++ ) {
        var tabMenu  = tabs[i];
        var tabName = tabMenu.getAttribute('tab');
        // タブクリック時のイベント設定
        this.clickTab(tabMenu,tabName);
      }
    }
    // 閉じるボタンのイベント設定
    var closeBtns = document.querySelectorAll(this.closebtnSelector);
    if ( closeBtns != undefined ) {
      nCount = closeBtns.length;
      if ( nCount > 0 ) {
        for ( var i=0; i < nCount; i++ ) {
          var closeBtn  = closeBtns[i];
          this.clickClose(closeBtn);
        }
      }
    }
  }
  clickTab(menu,tabName) {
    var sTabContentClass = this.tabContentClass;
    var sTabLinkClass = this.tabLinkClass;
    var sActiveClass = this.activeClass;
    menu.addEventListener('click', function() {
      openTab(event,tabName,sTabContentClass,sTabLinkClass,sActiveClass);
    }, false);
  }
  clickClose(closeBtn) {
    closeBtn.addEventListener('click', function() {
      closeBtn.parentElement.style.display='none';
    }, false);
  }
}


function openTab(evt, tabNameId,tabcontentClass,tabLinksClass,activeClass) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName(tabcontentClass);
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName(tabLinksClass);
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" " + String(activeClass), "");
  }
  document.getElementById(tabNameId).style.display = "block";
  evt.currentTarget.className += " active";
}

デモ

実装方法

MyTab初期化

<script type="text/javascript">
  var tab = new MyTab(".tab .tablinks",{});
</script>

MyTabクラスというのを作成しました。

初期化パラメータの第１パラメータに、各タブボタンのセレクタ文字列、第２パラメータにオプションを指定できるようにしました。

以上、ご参考まで

ご参考

関連記事