読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

jquery 最も簡単な自作タブ切り替え機能

スポンサードリンク

タブ切り替え機能をわかりやすく解説したいと思います。

cssは解説には不要なのでなしにしています。

デモ

See the Pen PGRjpv by funclur (@funclur) on CodePen.


解説

html

<ul class="js-tab-title">
<li class="active"><a href="#anc-tab01">タブA</a></li>
<li><a href="#anc-tab02">タブB</a></li>
<li><a href="#anc-tab03">タブC</a></li>
<li><a href="#anc-tab04">タブD</a></li>
</ul><!-- /.js-tab-title -->
  • タブ部分をまとめてマークアップします。
  • 表示したいタブを包括するliに.activeを付与します。
  • タブを包括するa要素に任意のアンカーリンクを充てます。(#anc-tab01など)
<div class="js-tab-content">
<div id="anc-tab01">
<p>あああああああ</p>
</div><!-- /#anc-tab01 -->
<div id="anc-tab02">
<p>いいいいいいい</p>
</div><!-- /#anc-tab02 -->
<div id="anc-tab03">
<p>うううううううううう</p>
</div><!-- /#anc-tab03 -->
<div id="anc-tab04">
<p>ええええええええ</p>
</div><!-- /#anc-tab04 -->
</div><!-- /.js-tab-content -->
  • 次にコンテンツ側をまとめてマークアップします。
  • コンテンツ側に先ほど付与したアンカーリンクに対応するidを振ります。

javascript

function showTabContent(){
  var id = $('.active').find('a').attr('href');
  $content.find('>*').hide();
  $(id).show();
}
showTabContent();
  • リストをすべて削除
  • .activeを付与したa要素のhrefを取得
  • そのhrefをid化する→$(id)
  • 以上を関数化する
$tab.on('click', function(e){
  var $self = $(this);
  e.preventDefault();
  $title.find('li').removeClass('active');
  $self.parent().addClass('active');
  showTabContent();
});
  • タブをクリックしたらliの.activeを消する
  • クリックしたタブの親要素に.activeを付与する
  • 読み込み時に実行した関数showTabContent()を再び実行

まとめ

関数化することで、余計な処理も走らず済みます。
cssはお好みでスタイルを充てていただければと思います。

是非参考にしてみてください。