高さの変わるタブメニュー

タブ内コンテンツの高さが合っていなくても問題ないタブメニューです。
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>
<!--div[prefectures]-->

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');
	});
});

デモページ

  • コーダーのための計算機