広告 WordPress

【WordPress】タブ機能の実装(CSS+jquery)メモ

jqueryの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="tab-wrap">
<div class="tab-group">
<div class="tab is-active" id="1">第1タブ</div>
<div class="tab" id="2">第2タブ</div>
<div class="tab" id="3">第3タブ</div>
</div>
<div class="panel-group">
<div class="panel is-show">
第1タブ本文</div>
<div class="panel">
第2タブ本文</div>
<div class="panel">
第3タブ本文</div>
</div>
/*--------------------------------------
  tab
--------------------------------------*/
.tab-wrap{
    margin-bottom: 40px;
}
.tab-group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
}
.tab{
    flex-grow: 1;
    background: #FFF;   /*タブのの背景色*/
    border:1px solid #00a968;   /*枠線の太さ 線種 色*/
    color: #000;    /*文字の色*/
    cursor: pointer;
    display: inline-block;
    font-size: 13px;    /*文字サイズ*/
    font-weight: bold;   /*太字*/
    text-align: center;
    transition: 1s;
    vertical-align: bottom;
	border-radius: 5px 5px 0 0;
    padding: 0.5em 0.5em;
}
.panel{
    display:none;
}
.tab.is-active{
    color:#FFF;    /*文字の色*/
    transition: 1s;
    background:#00a968;    /*背景色*/
    position:relative;
}
.panel.is-show{
    display:block;
}

@media screen and (max-width:480px) { 
.tab{
    padding: 10px 0 7px;
}
.tab.is-active{
    padding-bottom: 15px;
}
}
.tab.is-active:after{  /*三角部分*/
content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #00a968;
}
.panel-group{
    min-height:100px;
    margin-top:15px;
    border-top: 1px solid #00a968;
    border-bottom: 1px solid #00a968;
    border-right: 1px solid #00a968;
    border-left: 1px solid #00a968;
    padding: 10px;
}
jQuery(function($){
  $('.tab').on('click',function(){
    var idx=$('.tab').index(this);
    $(this).addClass('is-active').siblings('.tab').removeClass('is-active');
    $(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show');	
    $('.panel').eq(idx).addClass('is-show');
  });
});

-WordPress
-,