【コピペOK】タブでコンテンツ切り替え◇コーディングテク【デモあり】

今日はLPを想定して、レスポンシブ対応で、

『タブでコンテンツを切り替える』

コーディングをやっていきたいと思います。

今日やりたいこと。

See the Pen
タブ by studio-0 (@studio-0)
on CodePen.

タブとコンテンツの骨組み

HTML

タブボタン部分

<div class="tab-select-outer">
<p class="recipe__tab__ttl sp"><span><span>1111</span><i class="fas fa-chevron-down"></i></span></p>
<ul class="recipe__list" >
<li class="on"><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
</ul>
</div>

タブ部分

<div class="recipe__tab">
<!--tab01-->
<div class="recipe__tab__box" style="display: block;">
//コンテンツ内容01
</div>
<!--tab02-->
<div class="recipe__tab__box" style="display: none;">
//コンテンツ内容02
</div>
<!--tab03-->
<div class="recipe__tab__box" style="display: none;">
//コンテンツ内容03
</div>
</div><!--recipe__tab-->

JavaScript

$('.recipe .recipe__list li a').click(function(){ 
var ind=$(this).parent('li').index();

クリックされたタブボタンの順番を求めて、

('.recipe__tab__box:eq('+ind+')').show();

その順番と同じコンテンツを表示します。

①タブボタンを３つ並べる

HTML

<div class="recipe" id="a02">
<h2 class="bl_title">おすすめレシピ</h2>
<div class="tab-select-outer">        
<ul class="recipe__list clearfix" id="tab-button">
<li class="on"><a href="#"><span style="height: 34px;"><span>薬膳カレー</span></span><i class="fas fa-chevron-down"></i></a></li>
<li><a href="#"><span style="height: 34px;"><span>薬膳ステーキ</span></span><i class="fas fa-chevron-down"></i></a></li>
<li><a href="#"><span style="height: 34px;"><span>薬膳唐揚げ</span></span><i class="fas fa-chevron-down"></i></a></li>
</ul>
</div><!--#tab-select-outer-->
</div><!--#recipe-->

CSS

.recipe .tab-select-outer .recipe__list li {
margin-top: 10px;
width: 20%;
float: left;
text-align: center; }

②ボタンクリックで下のコンテンツを切り替える

JavaScript

//tab

$(function(){
if($(window).width() > 767){
$('.recipe .recipe__list li a > span').matchHeight();
}//タブボタンの高さを揃えています。
$('.recipe__tab__box').hide();
$('.recipe__tab__box:first').show();
$('.tab-select-outer .recipe__tab__ttl').click(function(){//スマホのみの要素
$('.tab-select-outer ul').slideToggle();
});
$('.recipe .recipe__list li a').click(function(){//タブボタンがクリックされたら
var ind=$(this).parent('li').index();//その順番を変数indに入れる
$(this).parent('li').addClass('on').siblings().removeClass('on');//siblings()はliの兄弟要素
$('.recipe__tab__box').hide();//コンテンツを非表示
$('.recipe__tab__box:eq('+ind+')').show();//タブボタンと同じ順番のコンテンツだけ表示



});
});

③スマホ時、タブをプルダウンに変更する

HTML

<div class="recipe" id="a02">
<h2 class="bl_title">おすすめレシピ</h2>
<div class="tab-select-outer">
<p class="recipe__tab__ttl sp"><span><span>薬膳カレー</span><i class="fas fa-chevron-down"></i></span></p>
<ul class="recipe__list clearfix" id="tab-button">
<li class="on"><a href="#"><span style="height: 34px;"><span>薬膳カレー</span></span><i class="fas fa-chevron-down"></i></a></li>
・
・
・
・

<p class="recipe__tab__ttl sp"><span><span>薬膳カレー</span><i class="fas fa-chevron-down"></i></span></p>

この部分はスマホのみで表示されます。

JavaScript

//tab

$(function(){

$('.recipe__tab__box').hide();//コンテンツは1番目以外を非表示。
$('.recipe__tab__box:first').show();
$('.tab-select-outer .recipe__tab__ttl').click(function(){//スマホだけ
$('.tab-select-outer ul').slideToggle();
});
$('.recipe .recipe__list li a').click(function(){
var ind=$(this).parent('li').index();
$(this).parent('li').addClass('on').siblings().removeClass('on');
$('.recipe__tab__box').hide();
$('.recipe__tab__box:eq('+ind+')').show();

});
});

スマホ時のみ表示される.recipe__tab__ttlをクリックしたら、

スライドして、<ul>を表示する。

タブボタンをクリックしたら、

その親要素のliにonクラスを追加し、他のliからonクラスを削除する。

クリックしたタブボタンの番号と同じ番号のコンテンツを表示する。

それ以外は非表示にする。

$('.recipe .recipe__list li a').click(function(){ 
var ind=$(this).parent('li').index(); 
$(this).parent('li').addClass('on').siblings().removeClass('on'); 
$('.recipe__tab__box').hide(); 
$('.recipe__tab__box:eq('+ind+')').show(); 
if($(window).width() < 768){
$('.tab-select-outer ul').slideToggle(); 
var text = $(this).text(); 
$('.tab-select-outer > p > span span').text(text); 
}

タブボタンをクリックした時に、スマホだった場合には

<ul>をスライドして閉じる。

クリックしたタブボタンに書いてあるテキストを

.tab-select-outer > p > span spanに表示させる。

コンテンツの画像の1枚目にfade-inさせる

HTML

<div class="recipe__tab__box" style="display: block;">
<div class="recipe__tab__inner">
<h3><span class="img"></span><span class="txt">薬膳カレー</span></h3>
<div class="recipe__img clearfix">
<div class="recipe__photo fade__box">
<div class="fade__inner fadeInLeft"></div>
<img src="https://studio-0.com/blog/wp-content/uploads/2020/04/recipe01_img01.jpg" alt=""></div>
<div class="recipe__text">
<h4>材料（2人分）</h4>
<ul class="recipe__list--info">
<li>
<p class="recipe__txt--left">ほうれん草</p>
<p class="recipe__txt--right">1束</p>
</li>
</ul>
<h5>A</h5>
<ul class="recipe__list--info recipe__list--info01">

<li>
<p class="recipe__txt--left">カレー粉・クミン</p>
<p class="recipe__txt--right">各大さじ1/2</p>
</li>
</ul>
<h4>作り方</h4>
<ul class="recipe__list--info recipe__list--info02">
<li>
<p class="recipe__txt--left">①</p>
<p class="recipe__txt--right">ほうれん草はさっとゆでて水気を絞り、3cm幅に切る。</p>
</li>
<li>
<p class="recipe__txt--left">②</p>
<p class="recipe__txt--right">ボウルで①・Aを和える。</p>
</li>
</ul>
</div>
</div>
</div>
</div><!--recipe__tab__box-->

fade-in部分

<div class="recipe__photo fade__box"> 
<div class="fade__inner fadeInLeft"></div> 
<img src="https://studio-0.com/blog/wp-content/uploads/2020/04/recipe01_img01.jpg" alt="薬膳カレー">
</div>

画像とスライドするBOX(fade__inner)を

(fade__box)で囲んでいます。

.fade__box {
position: relative;
overflow: hidden; }
.fade__box .fade__inner {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #fff; }

外側のdivにはrelative;、スライドするのBOXにはabsolute;

/*fadeInLeft*/
.fadeInLeft {
transform: translate(0, 0);
transition: all 1s; 
}
.fadeInLeft.on {
transform: translate(-100%, 0);
left: 0; 
}

スライドするのBOX（fadeInLeft）のアニメーション

JavaScript

//fadeInLeft
$(window).scroll(function () {


$('.fadeInLeft').each(function () {
if ($(window).scrollTop() > $(this).offset().top - $(window).height() + 200) {
$(this).addClass('on');
}
});

$('.fadeInRight').each(function () {
if ($(window).scrollTop() > $(this).offset().top - $(window).height() + 200) {
$(this).addClass('on');
}
});
}).trigger('scroll');

.fadeInLeftにonを付けるタイミング。

onがつくと、cssに書いたアニメーションが起こる。

完成！

タブでコンテンツを切り替えることができました！

詳細のHTML、CSS、JavaScriptは下記から参照してください。

See the Pen
タブ by studio-0 (@studio-0)
on CodePen.