【jQuery】秒速でタブUIメニューを実装する。

まずリストタグでメニューを定義。

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;
	});
});

完了!!うん!!簡単だね!!