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

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

▽今回の実装テーマ

• 上下のタブの連動
• 下のタブを押すとスクロールして上にスクロールして移動する
• 外部ページからのリンクIDを可能にする。リンクIDのタブを開いた状態にする

なんだか難しそうですねー

できる自信がありませんねー

1. シンプルなタブ切り替え

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

サンプルページはこちら

2. 上下のタブの連動

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

サンプルページはこちら

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

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

サンプルページはこちら

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

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

サンプルページはこちら

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

サンプルページはこちら

メモ

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

jQuery日本語リファレンス

jQuery（英語版）

さいごに

できたのですか？

できましたー