Bloggerでタブ切り替えを実装する方法

1. タブ切り替えのメリットとこのタブの特徴

関連する複数の情報を1箇所にまとめ、ユーザーが「今見たい情報」だけを表示できるため、ページが縦に長くなりすぎるのを防ぎます。

比較や切り替えがスムーズ

ページを上下にスクロールして探す手間がなく、クリック一つで瞬時に表示を切り替えられるため、ユーザーのストレスを軽減します。

直感的な操作性

「別の引き出しを開ける」ような感覚で操作できるため、初めて訪れたユーザーでも使い方が一目でわかります。

デザイン

タブ切替時にランプが滑らかにスクロールします。

Button 1 Button 2 Button 3

This is the content of 3-column tab 1.

This is the content of 3-column tab 2.

This is the content of 3-column tab 3.

2. 利用者への提供コード

---

HTML・CSS JavaScript

<div class="lava-lamp-wrapper">
  <h1 class="lava-title">Lava lamp multiple tabs</h1>
  
  <div class="custom-tabs-container">
    <div class="tab-buttons">
      <span class="content1">Button 1</span>
      <span class="content2">Button 2</span>
      <span class="content3">Button 3</span>
      <div class="lamp content1"></div>
    </div>

    <div class="tab-content">
      <div class="content1">This is the content of 1 container. This will be open when button 1 is clicked.</div>
      <div class="content2">This is the content of 2 container. This will be open when button 2 is clicked.</div>
      <div class="content3">This is the content of 3 container. This will be open when button 3 is clicked.</div>
    </div>
  </div>
</div>

<style>
.lava-lamp-wrapper {
  margin: 2em 0;
}

.lava-lamp-wrapper .lava-title {
  text-align: center;
  font: 300 40px 'Open Sans', sans-serif;
  color: #666;
  text-transform: uppercase;
}

.lava-lamp-wrapper .custom-tabs-container {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.lava-lamp-wrapper .tab-buttons {
  display: flex;
  background: #eee;
  position: relative;
  border-bottom: 2px solid #ddd;
}

.lava-lamp-wrapper .tab-buttons span {
  flex: 1;
  font: 400 14px 'Open Sans', sans-serif;
  color: #333;
  cursor: pointer;
  text-align: center;
  height: 40px;
  line-height: 40px;
  z-index: 2;
}

.lava-lamp-wrapper .lamp {
  width: 33.33%;
  height: 2px;
  background: #333;
  position: absolute;
  bottom: -2px;
  left: 0;
  transition: all 0.3s ease-in;
  z-index: 3;
}

.lava-lamp-wrapper .tab-content {
  background: #eee;
  border: 3px solid #ddd;
  border-top: none;
  padding: 15px;
  font: 400 13px 'Open Sans', sans-serif;
  color: #333;
  min-height: 80px;
  /* ちらつき防止: 高さが急変してもレイアウトが崩れないように設定 */
  position: relative;
  overflow: hidden;
}

.lava-lamp-wrapper .tab-content > div {
  display: none;
}

.lava-lamp-wrapper .tab-content > div.content1 {
  display: block;
}
</style>
  

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.lava-lamp-wrapper').each(function(){
    var $wrapper = $(this);
    var $lamp = $wrapper.find('.lamp');
    var $contentDivs = $wrapper.find('.tab-content > div');
    var $tabContent = $wrapper.find('.tab-content');
    
    $wrapper.find('.tab-buttons span').click(function(){
      var targetClass = $(this).attr('class');
      var index = $wrapper.find('.tab-buttons span').index(this);

      // ちらつき防止: 切り替え前に現在の高さを固定
      $tabContent.css('height', $tabContent.height());

      // ランプの移動
      $lamp.css('left', (index * 33.33) + '%');

      // コンテンツの切り替え
      $contentDivs.hide();
      $wrapper.find('.tab-content > div.' + targetClass).fadeIn(800, function(){
        // フェード完了後に高さをオートに戻す（中身の増減に対応するため）
        $tabContent.css('height', 'auto');
      });
    });
  });
});
</script>