コピペで簡単タブ切り替えです。
タブ切り替えってjQueryをつかってなんか難しいことをやらなきゃいけないイメージですが
コピペのみで簡単実装出来ますのでご紹介致します。
超簡単！３ファイルにコピペするだけ！
下記のファイルにコピペしたらタブ切り替えが出来てます。
騙されたと思って、是非試してみて下さい。
htmlファイル
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul class="tab"> <li>タブ1</li> <li>タブ2</li> </ul> <div class="tab_content"> ここにタブの中身を記載(タブ1の中身) </div> <div class="tab_content hide"> ここにタブの中身を記載(タブ2の中身) </div> |
cssファイル
|
1 2 3 |
.hide{ display: none; } |
jsファイル
|
1 2 3 4 5 6 7 8 9 |
$(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') }); }); |