【JQuery】タブ切り替えのスクリプトをプラグイン化
タブ切り替えのJQueryをプラグイン化してみた。
html
<script> $(function() { $('.tab li').tabChange({ tabClick: '.tab li', // タブのクラス tabContents: '.content li' // コンテンツのクラス }); }); </script> <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>コンテンツ内容1コンテンツ内容1コンテンツ内容1コンテンツ内容1コンテンツ内容1コンテンツ内容1</li> <li class="displayNone">コンテンツ内容2コンテンツ内容2コンテンツ内容2コンテンツ内容2コンテンツ内容2コンテンツ内容2</li> <li class="displayNone">コンテンツ内容3コンテンツ内容3コンテンツ内容3コンテンツ内容3コンテンツ内容3コンテンツ内容3</li> <li class="displayNone">コンテンツ内容4コンテンツ内容4コンテンツ内容4コンテンツ内容4コンテンツ内容4コンテンツ内容4</li> </ul>
scss
.tab { overflow:hidden; li { background:#ccc; padding:5px 25px; float:left; margin-right:1px; list-style:none; cursor: pointer; &.select { background:#eee; } } } .content li{ background:#eee; padding:20px; list-style:none; } .displayNone { display:none; }
JQuery
;(function($) { $.fn.tabChange = function(options){ // ここからがタブ切り替えの動作 $(this).click(function(){ // .index()を使いクリックされたタブが何番目かを調べ、 // indexという変数に代入します。 var index = $(options.tabClick).index(this); // コンテンツを一度すべて非表示 $(options.tabContents).addClass('displayNone').hide(); // クリックされたタブと同じ順番のコンテンツを表示 $(options.tabContents).eq(index).show().removeClass('displayNone'); // 一度タブについているクラスselectを削除 $(options.tabClick).removeClass('select'); // クリックされたタブのみにクラスselectを付ける $(this).addClass('select'); $(this).blur(); }); }; })(jQuery);
コメントを残す