切り替えたタブの背景色が違うタブの切り替え(テンプレート)タブの切り替えもデザインやマークアップをしていてよく遭遇しますよね。今回は自分のメモ用として応用しやすいタブの切り替えテンプレートを記事にまとめておきたいと思います。デモページはこちらDEMOこのテンプレートでは、切り替えの挙動をjqueryで指定。切り替えたそれぞれのタブとコンテンツのデザインをCSSで指定しています。CSSタブの切り替えコードの紹介HTMLアクティブにするタブのclassにselectedをつけます。jqueryで指定しているclassには全てja-をつけています。<p>タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。<p>タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。<p>タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。}).filter(':eq(0)').click();});JQuery読み込んだ後に記述します。class=”js-tab-link”>xxx</a>タグがクリックされたらすべてのコンテンツ$(‘js-tab-box)を非表示hide()にしてfilter()をかけることで,特定の要素だけ表示します。this.hashを使うと,クリックされたアンカーのハッシュ(#xxx)が取得できます。selectedを.removeClass(削除)して、選択された.js-tab-linkにつけます。false;でa要素がクリックされた際にjQueryの命令だけが実行され、href属性に設定されたリンク先に移動しないようにします。href=”#tab_1′′”>をクリックした状態にしておきます。.filter(‘:eq(0)’).click();の0を変えると、デフォルト時にどのタブをアクティブにするか変えることができます。#e9f4f0;}擬似要素+a.selectedを利用して選択時のタブの色を指定しています。2018.09.08ターミナルでよく使うコマンドとGitでのよく使う作業の流れを自分のメモ用にまとめました。2018.09.04私自身のメモとしてウェブ系カテゴリも今後追加していきます。コメントをキャンセルメールアドレスが公開されることはありません。(20)プロフィール都内在住30代小学生と保育園児の子を持つワーママです。最近やっと保育園の二ヶ所送迎から解放され育児にも少しだけ余裕がもてるようになりました。