今回はタブをクリックで切り替わるパネルを作ります。一昔前はAjaxと呼ばれ流行しましたね。
クリックイベントの処理 tab編 jQuery
jQueryは結構簡単で、今までの応用で出来ます。前回のjQueryの大枠の中に入れ子で書きます。
// クリック（タブ）
jQuery('.tab__nav ul li span').click(function(e) {
e.preventDefault();
let target = jQuery(this).data("target");
jQuery('.tab__nav ul li span').removeClass('is-active');
jQuery(this).addClass('is-active');
jQuery('.tab-item').removeClass('is-active');
jQuery(target).addClass('is-active');
return false;
});新しいメソッド.dataが出ました。.attrと似てますがちょっと違います。詳しくは以下のページをご覧ください。
https://www.fenet.jp/dotnet/column/language/6654/
下準備として、パネルに表示される画像をカンプからDLし、imgフォルダに入れておきます。
クリックイベントの処理 tab編 HTML
大きく分けて、タブとパネルを作ります。タブはグローバルナビと同じようにリストタグで実装できます。
まずtabというセクションを作ります。いつも通りインナーを入れます。インナーの中にセクションタイトル。ここまでは今までと同じですね。
<div class="tab__nav">
<ul>
<li><span class="is-active" data-target="#tab-item01">タブ1</span></li>
<li><span data-target="#tab-item02">タブ2</span></li>
<li><span data-target="#tab-item03">タブ3</span></li>
<li><span data-target="#tab-item04">タブ4</span></li>
</ul>
</div><!-- /.tab__nav -->このように各タブにdata-targetでIDをふってあげるのがポイントです。
.tab__contentの中に
<div id="tab-item01" class="tab-item is-active">
<div class="tab-item__lead"><span>タブ１のキャッチ的なテキスト</span></div><!-- /.tab-item__lead -->
<div class="tab-item__body">
<div class="tab-item__img"><img src="img/tab01.png" alt=""></div><!-- /.tab-item__img -->
<div class="tab-item__content">
<div class="tab-item__title">タブ１の見出し</div><!-- /.tab-item__title -->
<div class="tab-item__info">タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。タブ１のコンテンツ。</div><!-- /.tab-item__info -->
<div class="tab-item__link"><a class="button-arrow-right" href="">詳しく見る</a></div><!-- /.tab-item__link -->
</div><!-- /.tab-item__content -->
</div><!-- /.tab-item__body -->
</div><!-- /.tab-item -->これをタブの数4つ分複製します。tab-item02以降is-activeは要りません。(JSでつけ外しのため)
ボタンは使い回しでOKです。
クリックイベントの処理 tab編 CSS
長いですが書いていきます。
.tab
セクション全体。上と下のパディングを空けます。カンプでは上100px、下120pxとなっていましたが、回答例では上56px、下142pxでした。
SPではパディングを狭くします。
.tab__inner
記述なし。
.tab__nav
見出しとタブの隙間をpadding-topで空けます。タブがアクティブになった時の高さをheightで指定します。この2つの数値はカンプ通りでした。overflow: auto;で要素がはみ出した時スクロールバーを出します。(SP表示で出ると思います。)3pxの下線をメインカラーで引きます。
SP表示では線を細めにし、タブの高さも若干小さめにします。
グローバルナビを作る要領でタブをリストで作っていきます。まずはulで大枠を作ります。padding,marginとも0にしてカツカツに。display: flex;で中に入るliを横並びにします。align-items: flex-end;で全体を右寄せにします。jastify-content:space-beteen;でタブを等間隔で並べます。
liにはスタイルを設定せず、リストの中のspan要素、a要素に対してスタイルを当てていきます。これはボタンのコーディングノックの応用で大体できると思います。違う点はtransitionにwidthを指定し、クリックすると横にニューっと伸びるようにする点です。
タブレットとSP版ではそれぞれタブの幅を狭めに設定しておきます。
ここはJSと連動していく部分です。&.is-activeにタブがクリックされた時のスタイルを書きます。まずフォントサイズをちょっと大きめに、widthを広めにします。文字色は白でタブの色はメインカラーに。paddingも広めにし、縦にも少し広がるようにします。
タブレット、SP版では横幅狭めに。
ホバー時の挙動ですが、文字色と背景を変えます。
.tab__content
記述なし。
.tab-item
パネル全体。上下のpaddingを広く空けます。タブがクリックされていない時はdisplay: none;にしておきます。
&.is-active付与時のみdisplay: block;でパネル表示、縦積みにします。
.tab-item__lead
リードの部分ですね。文字を中央寄せにします。
span要素に左右の装飾を、擬似要素を使ってつけていきます。これは見出しのコーディングノック14番目の応用でできますね。
.tab-item__body
画像とテキストの2つのブロックを束ねるクラス。デイトラの簡易LPを作った時のようにfloatを使ってもいいですが、flexboxで作るのが楽ですね。上マージンのみ適度に空けます。
SP版ではdisplay: block;にし、縦積みにします。
.tab-item__img
width: 50%;にし、imgを決め打ちで576px;に。
SP版では幅100%にし、中央寄せにします。
.tab-item__content
テキストのエリア。widthを50%にします。margin-left: auto;にして、左から押す形にします。paddingを適度に取ります。
タブレットではpadding-rightを詰めます。padding-topを少し空けます。
SP版では幅100％にし、画像と交互に重なるようにします。padding左右を詰めます。
.tab-item__title
タブごとの見出しです。フォントサイズを若干大きめにし、太字にします。
.tab-item__info
テキスト本文。文字は見出しより小さくline-heightを割り算で指定します。
.tab-item__link
「詳しく見る」のボタンですね。text-align: center;で真ん中寄せにし、margin-topでテキストとの隙間を空けます。あとは以前作ったボタンのクラスをHTMLに入れてあげれば完了です。(もう作っていますね)
お疲れ様でした！次は「DAY 28 Q and Aをアコーディオンでコーディング」です。
コメント