コーディングメモ(4)

最近健康に気を使い始めました。
姿勢を正すのと運動するのを意識していこうと思います

以下メモ

タブで表示群の切り替え(jQuery使用)
css

displayNon{
  display:none;
}

js

//はじめはtab1を表示
$(function(){
  $("[id^=tab]").addClass('displaynon');  //すべて非表示にする
  $("tab1").removeClass('displaynon');  //tab1のみ表示する
})

//クリックされたタブに対応して切り替え
$(function(){
  $("selected").click(function() {  //selectedリストの要素がクリックされたら
    var selectNum = $(this).attr("id");  //クリックしたobjのID取り出し
    var num = selectNum.replace("selected","");  //selectedを消す
    $("[id^=tab]").addClass('displayNon');  //idの先頭にtabが付いている場合.displayNonを割り当てる
    $("[id^=tab"+num+"]").removeClass('displaynon');  //番号が一致したものはdisplayNonの割り当てを外す
  )}
)}

  • tab1
  • tab2
  • tab3
  • tab4
  • tab1_1
  • tab1_2
  • tab1_3
  • tab1_4
  • tab2_1
  • tab2_2
  • tab2_3
  • tab2_4
  • tab3_1
  • tab3_2
  • tab3_3
  • tab3_4
  • tab4_1
  • tab4_2
  • tab4_3
  • tab4_4

タブの切り替えの処理を作っててこんな感じのコードを書いたんですが改めて見るとブサイクだなーと感じました。
次はもっと綺麗に書こうと思います。

カテゴリー: javascript

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*