タブで切り替えるコンテンツを作成しておりますが、
行き詰ってしまったので、ご質問させて頂きます。
今回作成したいコンテンツとしては、
タブで内容を切り替えられるコンテンツです。
※簡単な仕様に関しては、
下記画像をご確認ください。
![イメージ説明]WIDTH:595
途中まで自力で組んでみたのですが、
どうしてもタブの位置と下の内容の位置がずれてしまいます。
現時点でのHTMLは下記の通りです。
lang
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<!--[if lt IE 9]> 7<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 8<![endif]--> 9<style type="text/css"> 10*{ 11 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic"; 12 color:#444; 13 font-size:0.95em; 14 text-decoration:none; 15 list-style: none; 16} 17#List_Group { 18 width:100%; 19} 20ul#tab { 21 position:relative; 22 left:0; 23 width:100%; 24 height:100px; 25 margin:0; 26 padding:0; 27 background-color:#000000; 28} 29#tab li { /* タブ */ 30 width:19.8%; 31 float: left; 32 margin:0 1px 0 0; 33 padding:10px 0 10px 0; 34 list-style: none; 35 cursor: pointer; 36 text-align:center; 37 background: #eee; 38 border:1px solid #ADADAD; 39 border-bottom:0; 40 -webkit-border-top-left-radius: 5px; /* Safari+Chrome:左上 */ 41 -webkit-border-top-right-radius: 5px; /* Safari+Chrome:右上 */ 42 -moz-border-radius-topleft: 5px; /* Firefox専用:左上 */ 43 -moz-border-radius-topright: 5px; /* Firefox専用:右上 */ 44 border-top-left-radius: 5px; /* 左上 */ 45 border-top-right-radius: 5px; /* 右上 */ 46 behavior: url(css/border-radius.htc); /* IE */ 47} 48#tab li.select { /* 選択済み */ 49 background:#727272; 50 color:#FFFFFF; 51} 52.hide { /* 非表示 */ 53 display: none; 54} 55.content_wrap { /* コンテンツ */ 56 /*clear: left;*/ 57 width: 100%; 58 height: 500px; 59 margin:0 auto; 60 padding:0 0 0 1%; 61 font-size: 20px; 62 background: #ccc; 63 color: #fff; 64} 65h1{ 66 font-size:16px; 67 font-weight:bold; 68 margin:0 0 5px 0; 69} 70/* ▼グレー▼ */ 71a:link{/*テキストリンクに使用*/ 72 text-decoration:none; 73 color:#4D4D4D; 74} 75a:hover{/*テキストリンクに使用:マウスオーバー*/ 76 text-decoration:underline; 77 color:#575757; 78} 79a:visited{/*テキストリンクに使用:訪問済みリンク*/ 80 text-decoration:none; 81 color:#4D4D4D; 82} 83 84.content_wrap ul{ 85 width:100%; 86 height:auto; 87 position:relative; 88 margin:0; 89 padding:0; 90 background-color:#AFC0FF; 91} 92.content_wrap li { 93 font-size:14px; 94 float:left; 95 margin:0 10px 0 0; 96 padding:0 0 0 10px; 97 list-style: none; 98 background: url("img/marker.gif") 0% 50% no-repeat; 99} 100 101</style> 102</head> 103<body> 104 105<div id="List_Group"> 106 107 108<ul id="tab"> 109 <li class="select">タブ1</li> 110 <li>タブ2</li> 111 <li>タブ3</li> 112 <li>タブ4</li> 113 <li>タブ5</li> 114</ul> 115 116<div style="clear:both;"></div> 117<div class="content_wrap"> 118 <h1>texttext</h1> 119 <ul> 120 <li>texttext</li> 121 <li>texttexttexttext</li> 122 <li>texttext</li> 123 <li>texttexttexttext</li> 124 <li>texttext</li> 125 <li>texttexttexttext</li> 126 <li>texttext</li> 127 <li>texttexttexttext</li> 128 <li>texttext</li> 129 <li>texttexttexttext</li> 130 </ul> 131 <div style="clear:both;"></div> 132 <h1>texttext</h1> 133 <ul> 134 <li>texttext</li> 135 <li>texttexttexttext</li> 136 <li>texttext</li> 137 <li>texttexttexttext</li> 138 <li>texttext</li> 139 <li>texttexttexttext</li> 140 <li>texttext</li> 141 <li>texttexttexttext</li> 142 <li>texttext</li> 143 <li>texttexttexttext</li> 144 </ul> 145 146 147</div> 148<div class="content_wrap hide">内容2</div> 149<div class="content_wrap hide">内容3</div> 150<div class="content_wrap hide">内容4</div> 151<div class="content_wrap hide">内容5</div> 152 153 154</div><!-- //#List_Group --> 155 156 157 158 159 160 161 162 163 164 165 166 167<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 168<script type="text/javascript"> 169//<![CDATA[ 170$(function() { 171 $("#tab li").click(function() { 172 var num = $("#tab li").index(this); 173 //$(".content_wrap").addClass('hide'); //クリックされた以外を非表示 174 //$(".content_wrap").eq(num).removeClass('hide'); //クリックされた以外を非表示 175 $(".content_wrap").hide(); //フェードイン+フェードアウトの処理 176 $(".content_wrap").eq(num).fadeIn(); //フェードイン+フェードアウトの処理 177 $("#tab li").removeClass('select'); 178 $(this).addClass('select') 179 }); 180}); 181//]]> 182</script> 183 184 185 186</body> 187</html>
上記HTMLをどのように修正すれば添付画像の様な、
仕様にできるのでしょうか。
お詳しい方是非、ご教授頂けましたら幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/14 01:54
2015/05/14 02:08
2015/05/14 02:46
2015/05/14 03:22
2015/05/14 03:26