![](https://konocode.jp/wp-content/uploads/2023/07/image_id12117.gif)
【Vanilla JS】タブ切り替え(トリガーとコンテンツが同一の親要素を持つ)
クリックしたトリガーの対象となる要素を出し分けるタブ切り替えをJavaScriptで実装する方法を紹介。タブのトリガーとコンテンツが同一の親要素を持つパターン。
329 件中 1〜20件目 を表示
クリックしたトリガーの対象となる要素を出し分けるタブ切り替えをJavaScriptで実装する方法を紹介。タブのトリガーとコンテンツが同一の親要素を持つパターン。
picture要素を使用して、圧縮率が高いWebP画像やAVIF画像などをブラウザの対応状況に応じて優先的に出し分ける方法を紹介。
PC画像とSP画像など、画面幅に応じて異なる画像を読み込む場合にpicture要素を使用して出し分ける方法を紹介。
クリックで開閉するアコーディオン(複数開閉)をJavaScriptを使用せずCSSのみで実装する方法を紹介。
アンカーリンクと連動するコンテンツアコーディオンを、タブ切り替えで管理する方法を紹介(複数開閉)。
アンカーリンク先の要素を、アコーディオンで開閉するjQueryで実装する方法を紹介(複数開閉)。
コンテンツが少ない場合にフッターを画面の最下部に固定する方法を紹介。
【パス会員限定】CSSグリッドを使用した2カラム、3カラム、4カラムの縦積みグリッドレイアウト。
クリックしたトリガーの対象となる要素を出し分けるタブがコンテンツの上下に存在する場合に、jQueryで実装する方法を紹介。
グローバルナビなどのナビゲーションのcurrent表示をJavaScriptで実装するパターンその1。
グローバルナビなどのナビゲーションのcurrent表示をjQueryで実装するパターンその1。
※(2)とセットです。
グローバルナビなどのナビゲーションのcurrent表示をjQueryで実装するパターンその2。※(1)とセットです。
グローバルナビなどのナビゲーションのcurrent表示をJavaScriptで実装するパターンその2。
OS・デバイス・ブラウザを判定し、bodyにclassを付与することで、それぞれの判定結果に対して個別にスタイルを割り当てる。
【パス会員限定】使用頻度が高い基本的なSPメニュー付きのfixedヘッダーレイアウトを実装。SPメニュー開閉処理(フェード)、SPメニューを開いた際の背景スクロール禁止処理、SPメニュー内のページ内リンクをクリックした際にメニューを閉じる処理のJS(jQuery)も記載。
CSSのcounter-incrementプロパティを使用して連番表示する際に、数字をゼロパディング(01, 02, ...)にして表示する方法を紹介。