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

【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(英語版)

さいごに

きのこさん
できたのですか?
きのこさん
できましたー
Author

デザコト

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

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)