タブ(画面上部の３つぼボタン)クリックで切り替え
表示画像クリックでモーダル表示

タブ切替部分について簡素なメモ書き
タブ部分：画面上の各ボタンの事
表示領域部分：タブボタン下の画像部分

画面ロード時の動き

• 1:タブ部分と表示領域部分(画像部分)のclass名を全取得
• 2:初期表示設定を行う
  　┣ タブは一番左のタブがONになるように
  　┗ 表示領域はタブにあった物以外をdisplay:noneと書き換える
  　※両方固定値で指定しているので、書き換える事で変更可能
  
• 3:1で取得したタブ部分のclass名を使用し、各タブにクリックイベント時の処理を付与させます。
  　┗ bindを使用し、コールバック関数を指定させます。
  　　コールバック関数については4で生成させます。
  
• 4:3で実行される関数を生成します。
  　関数の内容については後述します。
  

コールバック関数の内容

• 1:クリックされたタブのIDを取得
• 2:1で取得したIDから tab という文字列を削除
• 3:現在ONになっているタブを閉じる 　アニメーションを使用し、display:noneにさせます。
• 4:クリックされた物に紐づく要素を開きます。
  　開く要素(li部分)の各IDを取得し、それを使ってアニメーションを使って順番に表示させます
  　$(開くID).stop().delay(ディレイ秒数).css({'display' : 'block'}).animate(
  　とする事で順番に表示させる事が可能です。
• 5:クリックされた物に紐づく要素を開きます。
  　開く要素(li部分)の各IDを取得し、それを使ってアニメーションを使って順番に表示させます
  　$(開くID).stop().delay(ディレイ秒数).css({'display' : 'block'}).animate(
  　とする事で順番に表示させる事が可能です。

1:現在表示されている要素を閉じる
2:対象要素を開く
　アニメーションを使用、delayをかけて順番に表示
3:クリックしたタブをONに

それはないで