【jQuery】タブ切り替え実装サンプル集(上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能)

【jQuery】タブ切り替え実装サンプル集(上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能)

少し複雑な『タブ切り替え』を実装してみました。

▽今回の実装テーマ

  • 上下のタブの連動
  • 下のタブを押すとスクロールして上にスクロールして移動する
  • 外部ページからのリンクIDを可能にする。リンクIDのタブを開いた状態にする
なんだか難しそうですねー
できる自信がありませんねー

シンプルなタブ切り替え

See the Pen 【jQuery】シンプルなタブ切り替え(外部ページからのリンクIDも可能) by 125naroom (@125naroom) on CodePen.

上下のタブの連動

See the Pen 【jQuery】タブ切り替え(上下のタブの連動) by 125naroom (@125naroom) on CodePen.

下のタブを押すとスクロールして上にスクロールして移動する

See the Pen 【jQuery】タブ切り替え(上下のタブの連動、下のタブを押すとスクロールして上にスクロールして移動する) by 125naroom (@125naroom) on CodePen.

【完成版】上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能

See the Pen 【jQuery】タブ切り替え(上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能) by 125naroom (@125naroom) on CodePen.

【確認】外部ページからのリンクIDを可能にする。リンクIDのタブを開いた状態にする

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

さいごに

できたのですか?
できましたー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

4

/

24

2025

Googleさんの
おすすめ

4

/

24

2025

デザインの記事

TACTILE
  • 2025.04.22New
  • TACTILE
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
映画『ファーストキス 1ST KISS』