タブメニュー作成方法
「jquery.min.js」をダウンロード致します。
ダウンロード先
jQueryタブメニュー
下記のソースを追加してください。
|
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
body{ font-family: Arial, sans-serif; -webkit-font-smoothing: antialiased; background:#E46E6E; } ul li { float: left; list-style-type: none; width: 25%; } ul li a { font-size: 1em; font-weight: bold; color: #FFF; text-decoration: none; display: block; padding: 9%; text-align: center; width: 100%; background: #C15757; border: 1px solid #c15757; border-bottom: none; } ul li a:hover{ background:#D26161; color:#FFF; } ul li a.current { background: white; color: #C15757; } #contents{ clear:both; } #contents div { padding: 5%; background: white; text-align: center; border: 1px solid #c15757; border-top: none; } #contents p{ margin-top:20px; line-height:2em; color:#C15757; } #contents strong { font-size: 2em; font-weight: bold; color: #c15757; text-decoration: underline; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<ul> <li><a href="#tab1" class="current">color</a></li> <li><a href="#tab2" class="">size</a></li> <li><a href="#tab3" class="">Material</a></li> <li><a href="#tab4" class="">Country</a></li> </ul> <div id="contents"> <div id="tab1"> <p><strong>Blue/Red/White</strong></p> <p></p> </div> <div id="tab2"> <p><strong>36・38・40</strong></p> <p></p> </div> <div id="tab3"> <p><strong>cotton 100%</strong></p> <p></p> </div> <div id="tab4"> <p><strong>Japan</strong></p> <p></p> </div> </div> |
|
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 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function(){ $('#contents div[id != "tab1"]').hide(); // タブをクリックすると $("a").click(function(){ // 一度全てのコンテンツを非表示にする $("#contents div").hide(); // 次に選択されたコンテンツを再表示する $($(this).attr("href")).show(); // 現在のcurrentクラスを削除 $(".current").removeClass("current"); // 選択されたタブ（自分自身）にcurrentクラスを追加 $(this).addClass("current"); return false; }); }); </script> </script> |
参考サイト
