無料登録ログインソースコードを投稿タグ:JavaScript(396)jQuery(172)jQueryでタブメニューを作るgoto_jp|3,402views|更新:2014年5月29日ストックいいね!0サンプルはこちら。CodePen.タブUIを作るjQueryプラグインも存在しますが、プラグインに頼らず必要最低限なタブUIを作る方法です。&lt;li&gt;タブ2の内容&lt;/li&gt;&lt;/ul&gt;タブメニュー部分の「tab」のリストと、その内容となる「tabContent」のリストで構成され、有効なタブとその内容には「active」が付いています。「tabContent」内の<li>は平時は非表示で、「active」が付いているもののみを表示させており、この「active」の付与・除去によってタブUIを表現しています。});});「tab」内の<li>がクリックされた時に処理が始まります。3行目でクリックされたタブが、「<ul>内で何番目の<li>なのか」という番号を「index」に格納しています。4行目で、「tabContent」の<li>すべてから「active」を抜き非表示にしています。5行目で、3行目で取得した順と同じ順にある「tabContent」の<li>に「active」を付与し表示させています。「tab」内の2番目の<li>がクリックされていたら、「tabContent」の2番目の<li>を表示させるといった形です。6行目で、「tab」の<li>すべてから「active」を除去しています。7行目で、クリックされた<li>自身へ「active」を付与しています。新規登録またはメールアドレスで新規登録SNSアカウントをご利用いただけます。FacebookGitHubTwitterログインメールアドレスまたはユーザー名パスワードログイン状態を保存するログインパスワードをお忘れですか?hacknoteを利用することでソースコードを簡単に共有できます。新規登録してコメントするこのソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。キュレーター424hacksgoto_jpフロントコーディングと効率化などについてよく書きます。