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

もくじ

  1. シンプルなタブ切り替え
  2. 上下タブの連動
  3. 下のタブを押すとスクロールして上にスクロールして移動する
  4. 【完成版】上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能
  5. 【確認】外部ページからのリンクIDを可能にする。リンクIDのタブを開いた状態にする

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

Tab1 text
Tab2 text
Tab3 text

View the note

2. 上下タブの連動

Tab1
Tab2
Tab3
Tab1 text
Tab2 text
Tab3 text
Tab1
Tab2
Tab3

View the note

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

Tab1
Tab2
Tab3
Tab1 text
Tab2 text
Tab3 text
Tab1
Tab2
Tab3

View the note

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

Tab1 text
Tab2 text
Tab3 text

View the note

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

▽リンクを押すと「Tab1(緑色)」が開いた状態。
https://125naroom.com/demo/jquery-tab.html#s_04_tab01

▽リンクを押すと「Tab2(黄色)」が開いた状態。
https://125naroom.com/demo/jquery-tab.html#s_04_tab02

▽リンクを押すと「Tab3(ピンク色)」が開いた状態。
https://125naroom.com/demo/jquery-tab.html#s_04_tab03