Web筋トレも使っているサーバー!ロリポップを使ってみない?

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

Sponser Link

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

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

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

今日やりたいこと。

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

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

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

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

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

Sponser Link

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

HTML

タブボタン部分

タブ部分

JavaScript

クリックされたタブボタンの順番を求めて、
その順番と同じコンテンツを表示します。

Sponser Link

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

HTML

CSS

Sponser Link

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

JavaScript

Sponser Link

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

HTML

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

JavaScript

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

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

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

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

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

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

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

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

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

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

Sponser Link

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

HTML

fade-in部分

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

(fade__box)で囲んでいます。

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

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

JavaScript

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

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

Sponser Link

完成!

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

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

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

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA