【知識必要なし!!】コピペで簡単実装！タブ切り替え

コピペで簡単タブ切り替えです。

タブ切り替えってjQueryをつかってなんか難しいことをやらなきゃいけないイメージですが

コピペのみで簡単実装出来ますのでご紹介致します。

超簡単！３ファイルにコピペするだけ！

下記のファイルにコピペしたらタブ切り替えが出来てます。

騙されたと思って、是非試してみて下さい。

htmlファイル

<ul class="tab">
	<li>タブ1</li>
	<li>タブ2</li>
</ul>

<div class="tab_content">
	ここにタブの中身を記載(タブ1の中身)
</div>
<div class="tab_content hide">
	ここにタブの中身を記載(タブ2の中身)
</div>

cssファイル

.hide{
  display: none;
}

jsファイル

$(function() {
  $('.tab li').click(function() {
    var index = $('.tab li').index(this);
    $('.tab_content').css('display','none');
    $('.tab_content').eq(index).css('display','block');
    $('.tab li').removeClass('select');
    $(this).addClass('select')
  });
});

あとはお好みでcssカスタマイズして下さい！