高さの変わるタブメニュー
タブ内コンテンツの高さが合っていなくても問題ないタブメニューです。
js(jQuery)でやっていることはタブコンテンツのdisplayプロパティ変更と、クリックしたタブメニューにclassを付けるくらいです。
後の動きはすべてcssで行っています。
一応レスポンシブ対応。
HTML
<div class="prefectures">
<div class="prefectures_inner inner clearfix">
<ul class="prefectures_tab">
<li class="select">北海道</li>
<li>東北</li>
<li>関東</li>
</ul>
<ul class="prefectures_list">
<li>
<table class="prefectures_table">
<thead>
<tr>
<th>都道府県</th>
<th>県庁所在地</th>
<th>県の花</th>
<th>特産物</th>
</tr>
</thead>
<tbody>
<tr>
<td>北海道</td>
<td>札幌</td>
<td>浜梨</td>
<td>夕張メロン、メークイン・男爵いも、毛ガニ、イクラ</td>
</tr>
</tbody>
</table>
</li>
<li class="hide">
<table class="prefectures_table">
<thead>
<tr>
<th>都道府県</th>
<th>県庁所在地</th>
<th>県の花</th>
<th>特産物</th>
</tr>
</thead>
<tbody>
<tr>
<td>青森</td>
<td>青森</td>
<td>りんご</td>
<td>りんご、長いも、いか、にんにく</td>
</tr>
<tr>
<td>岩手</td>
<td>盛岡</td>
<td>桐</td>
<td>イワナ、前沢牛、盛岡冷麺、久慈琥珀</td>
</tr>
<tr>
<td>宮城</td>
<td>仙台</td>
<td>萩</td>
<td>笹かまぼこ、仙台長なす漬け、ゆべし、白石温麺</td>
</tr>
<tr>
<td>秋田</td>
<td>秋田</td>
<td>蕗の薹</td>
<td>比内地鶏、稲庭うどん、天然岩ガキ、ハタハタ</td>
</tr>
<tr>
<td>山形</td>
<td>山形</td>
<td>紅花</td>
<td>さくらんぼ、米沢牛、尾花沢スイカ、納豆汁</td>
</tr>
<tr>
<td>福島</td>
<td>福島</td>
<td>石楠花</td>
<td>あんぽ柿、喜多方ラーメン、会津漆器、松葉ガニ</td>
</tr>
</tbody>
</table>
</li>
<li class="hide">
<table class="prefectures_table">
<thead>
<tr>
<th>都道府県</th>
<th>県庁所在地</th>
<th>県の花</th>
<th>特産物</th>
</tr>
</thead>
<tbody>
<tr>
<td>東京</td>
<td>東京</td>
<td>ソメイヨシノ</td>
<td>深川丼、江戸甘みそ、小松菜、東京しゃも</td>
</tr>
<tr>
<td>神奈川</td>
<td>神奈川</td>
<td>山百合</td>
<td>やまゆりポーク、鎌倉彫、高座豚、崎陽軒</td>
</tr>
<tr>
<td>埼玉</td>
<td>さいたま</td>
<td>桜草</td>
<td>五家宝、おなめ、草加せんべい、狭山茶</td>
</tr>
<tr>
<td>千葉</td>
<td>千葉</td>
<td>菜の花</td>
<td>落花生、てっぽう漬、アサリ、うなぎ大和煮</td>
</tr>
<tr>
<td>茨城</td>
<td>水戸</td>
<td>薔薇</td>
<td>あんこう鍋、水戸納豆、かぼちゃ、常陸牛</td>
</tr>
<tr>
<td>栃木</td>
<td>宇都宮</td>
<td>やしおつつじ</td>
<td>かんぴょう、杉線香、佐野ラーメン、益子焼き</td>
</tr>
<tr>
<td>群馬</td>
<td>前橋</td>
<td>れんげつつじ</td>
<td>磯部せんべい、下仁田こんにゃく、水沢うどん、下仁田ネギ</td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
</div>
CSS
/*----------------------------------------------------------------------*/
/*タブメニュー
/*----------------------------------------------------------------------*/
.prefectures_tab{
width:980px;
margin:0 auto;
overflow:hidden;
}
.prefectures_tab li{
background:#d1d5dd;
padding:15px 50px;
float:left;
margin-left:10px;
font-size: 2.3rem;
cursor:pointer;
-webkit-transition: .3s;
transition: .3s;
}
.prefectures_tab li:first-child{
margin-left:0;
}
.prefectures_tab li.select{
background:#171790;
color: #fff;
}
.prefectures_list{
padding-bottom: 20px;
border-top: 5px solid #171790;
background: #d1d5dd;
}
.prefectures_list li{
margin-top: 20px;
}
.prefectures .hide {
display:none;
}
/*----------------------------------------------------------------------*/
/*prefectures_table
/*----------------------------------------------------------------------*/
.prefectures_table{
width: 980px;
margin: 0 auto;
}
.prefectures_table thead{
color: #fff;
background: #171790;
}
.prefectures_table thead th{
padding: 15px 0;
font-weight: bold;
font-size: 1.8rem;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.prefectures_table td{
padding: 10px;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
}
.prefectures_table tbody>tr{
background: #fff;
}
.prefectures_table tbody>tr:nth-child(odd){
background: #eff2fa;
}
@media screen and (max-width: 979px) {
/*----------------------------------------------------------------------*/
/*タブメニュー[sp]
/*----------------------------------------------------------------------*/
.prefectures_tab{
width:100%;
min-width:300px;
overflow:hidden;
}
.prefectures_tab li{
background:#d1d5dd;
padding:10px 20px;
float:left;
margin-left:10px;
font-size: 1.6rem;
cursor:pointer;
-webkit-transition: .3s;
transition: .3s;
}
.prefectures_tab li.select{
background:#171790;
color: #fff;
}
.prefectures_list{
border-top: 5px solid #171790;
}
.prefectures_list li{
background:#eee;
margin-top: 20px;
-webkit-transition: .3s;
transition: .3s;
}
.prefectures .hide {
display:none;
}
/*----------------------------------------------------------------------*/
/*prefectures_table
/*----------------------------------------------------------------------*/
.prefectures_table{
width: 100%;
}
.prefectures_table thead{
color: #fff;
background: #171790;
}
.prefectures_table thead th{
padding: 5px 0;
font-weight: bold;
font-size: 1.4rem;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
vertical-align: middle;
}
.prefectures_table td{
padding: 10px;
text-align: center;
font-size: 1.4rem;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
}
.prefectures_table tbody>tr{
background: #fff;
}
.prefectures_table tbody>tr:nth-child(odd){
background: #eff2fa;
}
}
Js(jQuery)
/*----------------------------------------------------------------------*/
/*タブメニュー
/*----------------------------------------------------------------------*/
$(function() {
//.prefectures_tab liをクリックしたとき
$(".prefectures_tab li").on("click", function() {
//クリックされた.prefectures_tab liを特定する
var index = $('.prefectures_tab li').index(this);
//.prefectures_list liにはあらかじめdisplay:noneを効かせておく
$('.prefectures_list li').css('display','none');
//クリックされた.prefectures_list liを.eq(index)で探しだし、display:blockを効かせる
$('.prefectures_list li').eq(index).css('display','block');
//クリックされた.prefectures_tab liにはclass名selectを付け、他のものには付けない。
$('.prefectures_tab li').removeClass('select');
$(this).addClass('select');
});
});
