Jquery has already made a tab function that’s very easy to use. But if you have problem using such function and you’re considering of other function to achieve the same output, you can try my own jquery tab function.

jQuery.fn.smplTab = (function(/*param1, ... */){
	$ = jQuery;
	$(this).addClass('smpl-tab');

	$(this).find('.tab-links li a').live('click', function(){
		$('.tab-links li').removeClass('active');
		$(this).parents('li').addClass('active');

		$('.tab-content .tab').css('display', 'none');
		$href = $(this).attr('href');
		$tab_id = $href.substr(1);
		$('#'+$tab_id).css('display', 'block');

		return false;
	});

	css = '.smpl-tab .tab-content .tab {display: none;}';
	css += '.smpl-tab ul.tab-links { padding: 0; margin: 0 0 10px 0; border-bottom: solid #000 2px; }';
	css += '.smpl-tab .tab-links li { display: inline-block; background: #ccc; padding: 7px 10px; }';
	css += '.smpl-tab .tab-links li a { text-decoration: none; color: #000; font-size: 14px; font-weight: bold; }';
	css += '.smpl-tab li.active { background: #000; }';
	css += '.smpl-tab li.active a { color: #fff; }';

	$('body').append(css);
});

To call:

$jx('#tshirt-designer-tab').smplTab(); 

Add the tab and its contents:

<div id="tshirt-designer-tab">
	<ul class="tab-links">
	 	<li><a href="#tab-step1">Text Based</a></li>
 		<li class="active"><a href="#tab-step2">Design Based</a></li>
	</ul>
	<div class="tab-content">
		<div id="tab-step1" class="tab">
			<div class="form-line"><label>Enter Text (max of 4 lines)</label>
			<textarea class="text" name="design_data[text]" rows="4"></textarea></div>
		</div>
		<div id="tab-step2" class="tab">
			<div class="form-line"><label>Enter Text (max of 4 lines)</label>
			<input class="text" name="design_data[design-text]" type="text" /></div>
		</div>
	</div>
</div>

Leave a Reply