100%);background:#EFEFEF}パソコン、スマホ、アプリ、ゲーム、ウェブのニュースや記事などをお伝えします。2015.11.30Webサイトのお知らせなどのカテゴリが複数ある時は、タブを切り替えて表示させるのが一般的かと思います。今回はCSSで作ったタブを、jqueryを使用して切り替える方法をご紹介いたします。目次サンプルソースと解説jshtmlcss全ソースまとめサンプルまずはサンプルをご覧ください。サンプルソースと解説ソースはjs、html、cssの3つとなります。});});「#tab」の「li」をクリックしたときにタブとタブの配下にある内容を切り替えています。「addClass」と「removeClass」により「select」のクラスを加える、または取り去り、タブについている「▼(逆三角形)」の非表示を行っています。htmlタブとタブの内容に分かれています。<p>タブ4の内容</p></div>タブの部分です。class="tab4">タブ4</li></ul>タブの内容部分です。<p>タブ4の内容</p></div>cssデフォルトの打ち消しと、タブ、タブの内容部分、フロートをサポートするクリアフィックスの部分に分かれます。1;}デフォルトのスタイルを打ち消しています。0;}タブの基本プロパティです。8px;}タブ1からタブ4の色を指定しています。Generator」で作りました。*/}「li」の「:before」疑似要素でタブの「▼(逆三角形)」を表現しています。#2CAFE3;}タブの内容を装飾しています。「.box.d_none」はタブの内容の非表示ように使用しています。#CCC;}タブの「li」をフロートしているので、「clearfix」で高さを整えています。1;}全ソースjqueryは「jquery-1.11.3.min.js」を使用しています。<p>タブ4の内容</p></div></body></html>まとめソースはjs、html、cssの3つ。「addClass」と「removeClass」により「select」のクラスを加える、または取り去り、タブについている「▼(逆三角形)」の非表示を行っている。タブの色はCSS3で表示。「li」の「:before」疑似要素でタブの「▼(逆三角形)」を表現。「clearfix」でフロートによる高さを整えている。jqueryは「jquery-1.11.3.min.js」を使用。タブの表示に関してはCSS3で表現しているので、比較的新しいブラウザに限定されます。今回は行いませんでしたが、タブの保持なども「jquery.cookie.js」を使えば容易に行うことができます。jQueryスポンサーリンクシェアするTwitterFacebookはてブPocketLINEボヘミアンをフォローするこの記事が気に入ったらいいね!しよう最新情報をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。コメントデータの処理方法の詳細はこちらをご覧ください。アプリ相互リンクWebGeekers自由空間。SPACEオールフリーソフトフリーソフトラボ.com最近のコメントボヘミアン2020.02.22当サイトへお越しいただきありがとうございます。私は試していませんが、下記のサイトでは認識出来ている...Steamのゲームデータを外付けのハードディスクに移動して起動する人骨マン2020.02.22すみませんこの方法だと新pcに引っ越す時に外付けHDDのフォルダを選択すればすぐに起動出来ますかSteamのゲームデータを外付けのハードディスクに移動して起動するボヘミアン2020.01.22当サイトへお越しいただきありがとうございます。NTTに連絡をして再度おくっていただけるように、お願...NTT東日本からレンタル機器の返却用キットが届いたので、返送の準備をしてみた多田和弘2020.01.21返却no.301000042104084です。