mk-webwork codenote
タブメニュー
矢印アイコン

タブメニュー

  • JavaScript
  • 動くデザイン
<!-- ========================================  
  タブメニュー
========================================  -->
<section id="tabmenu">


<div class="wrapper">
  <ul class="tab">
    <li><a href="#menu01">コンテンツ1</a></li>
    <li><a href="#menu02">コンテンツ2</a></li>
    <li><a href="#menu03">コンテンツ3</a></li>
  </ul>
  
  <div class="contents-wrapper">
    <div id="menu01" class="contents">
      <h3>コンテンツ1</h3>
      <ul class="list-wrapper">
        <li><img src="img/tab-yellow01.png" alt="黄1"></li>
        <li><img src="img/tab-yellow02.png" alt="黄2"></li>
        <li><img src="img/tab-yellow03.png" alt="黄3"></li>
      </ul>
    <!--/contents--></div>
    <div id="menu02" class="contents">
      <h3>コンテンツ2</h3>
      <ul class="list-wrapper">
        <li><img src="img/tab-green01.png" alt="緑1"></li>
        <li><img src="img/tab-green02.png" alt="緑2"></li>
        <li><img src="img/tab-green03.png" alt="緑3"></li>
      </ul>
    <!--/contents--></div>
    <div id="menu03" class="contents">
      <h3>コンテンツ3</h3>
      <ul class="list-wrapper">
        <li><img src="img/tab-red01.png" alt="赤1"></li>
        <li><img src="img/tab-red02.png" alt="赤2"></li>
        <li><img src="img/tab-red03.png" alt="赤3"></li>
      </ul>
    <!--/contents--></div>
  </div>
<!--wrapper--></div>


</section>
/* =================================== */
/*   タブメニュー   */
/* =================================== */
/*tabの形状*/
#tabmenu .tab{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#tabmenu .tab li a{
  display: block;
  margin:0 2px;
  padding:10px 20px;
  background:#008b8b;
  border-top: 1px solid #008b8b;
  border-left: 1px solid #008b8b;
  border-right: 1px solid #008b8b;
  color: #FFF;
  transform: skewX(-10deg)/*斜めになる*/
}
/*liにactiveクラスがついた時の形状*/
#tabmenu .tab li.active a{
  background:#fff;
  color: #008b8b;
}
/*エリアの表示非表示と形状*/
#tabmenu .contents {
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過0*/
  background: #fff;
  padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
#tabmenu .contents.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* 装飾用 */
#tabmenu .contents-wrapper {
  border: 1px solid #008b8b;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
#tabmenu .list-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
#tabmenu .list-wrapper li {
  width: 30%;
  max-width: 150px;
}



// ==========================================
//  タブメニュー 
// ==========================================
//任意のタブにURLからリンクするための設定
function GethashID (hashIDName){
  if(hashIDName){
    $('a[href^="#"]').off('click');//スムーススクロールをオフにする 
    //タブ設定
    $('.tab li').find('a').each(function() { //タブ内のaタグ全てを取得
      var idName = $(this).attr('href'); //タブ内のaタグのリンク名（例）#lunchの値を取得 
      if(idName == hashIDName){ //リンク元の指定されたURLのハッシュタグ（例）http://example.com/#lunch←この#の値とタブ内のリンク名（例）#lunchが同じかをチェック
        var parentElm = $(this).parent(); //タブ内のaタグの親要素（li）を取得
        $('.tab li').removeClass("active"); //タブ内のliについているactiveクラスを取り除き
        $(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加
        //表示させるエリア設定
        $(".contents").removeClass("is-active"); //もともとついているis-activeクラスを取り除き
        $(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加 
      }
    });
  }
}

//タブをクリックしたら
$('.tab a').on('click', function() {
  var idName = $(this).attr('href'); //タブ内のリンク名を取得  
  GethashID (idName);//設定したタブの読み込みと
  return false;//aタグを無効にする
});


// 上記の動きをページが読み込まれたらすぐに動かす
$(window).on('load', function () {
    $('.tab li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加
    $('.contents:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加
  var hashName = location.hash; //リンク元の指定されたURLのハッシュタグを取得
  GethashID (hashName);//設定したタブの読み込み
});
←　もどる