まずリストタグでメニューを定義。
var tabMenu = $('<ul>', {class: 'tab-menu'}); tabMenu.append($('<li>', {class: 'active'}).append($('<a>', {href: '#'}).html('タブ1'))); tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ2'))); tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ3'))); tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ4'))); tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ5'))); tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ6'))); tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ7')));
次に各タブのコンテンツ要素を定義
var tabContent = $('<div>', {class: 'tab-content'}); tabContent.append($('<div>').html('コンテンツ1')); tabContent.append($('<div>').html('コンテンツ2')); tabContent.append($('<div>').html('コンテンツ3')); tabContent.append($('<div>').html('コンテンツ4')); tabContent.append($('<div>').html('コンテンツ5')); tabContent.append($('<div>').html('コンテンツ6')); tabContent.append($('<div>').html('コンテンツ7'));
最後に挙動実装。
var tabs = tabMenu.children(); var contents = tabContent.children(); $.each(contents, function(key, elem) { if(key != 0) { $(elem).hide(); } $(tabs[key]).click(function() { var that = this; var index = 0; $.each(tabs, function(key) { if(this == that) { index = key; } }); $.each(contents, function(key) { if(index == key) { $(this).show(); $(tabs[key]).addClass('active'); } else { $(this).hide(); $(tabs[key]).removeClass('active'); } }); return false; }); });
完了!!うん!!簡単だね!!