【jQuery】タブパネルの実装とレイアウト
タブの選択によって表示内容を切り替えられるパネルをjQueryで実装します。 完成サンプル こちらをクリック – HTML –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<body> <div id="container"> <ul class="tab"> <li><a href="#newsTab" class="selected">ニュース</a></li> <li><a href="#keizaiTab">経済</a></li> <li><a href="#enterTab">エンタメ</a></li> <li><a href="#sportsTab">スポーツ</a></li> </ul> <ul class="panel"> <li id="newsTab"> <ul> <li><a href="index.html">ニュース 1</a></li> <li><a href="index.html">ニュース 2</a></li> <li><a href="index.html">ニュース 3</a></li> </ul> </li> <li id="keizaiTab"> <ul> <li><a href="index.html">経済 1</a></li> <li><a href="index.html">経済 2</a></li> <li><a href="index.html">経済 3</a></li> </ul> </li> <li id="enterTab"> <ul> <li><a href="index.html">エンタメ 1</a></li> <li><a href="index.html">エンタメ 2</a></li> <li><a href="index.html">エンタメ 3</a></li> </ul> </li> <li id="sportsTab"> <ul> <li><a href="index.html">スポーツ 1</a></li> <li><a href="index.html">スポーツ 2</a></li> <li><a href="index.html">スポーツ 3</a></li> </ul> </li> </ul> </div> <script src="tabPanel.js"></script> </body> |
& […]
