ThaiSEOBoard.com

<script type="text/javascript">
	$(function() {
		$( "#tabs" ).tabs({ selected: 0 });
	});
</script>

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Tab1 content</p>
	</div>
	<div id="tabs-2">
		<p>Tab2 content</p>
	</div>
	<div id="tabs-3">
		<p>Tab3 content</p>
	</div>
</div>

.ui-tabs { width:600px; position: relative; padding: 1px; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: 1px 1px 0; float:none; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 1px 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px;}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a,  .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text;  background-color:#EEEEEE;}
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; background-color:#CCCCCC; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { width: 600px; display: block; border-width: 0; padding: 4px; background-color:#EEEEEE; text-align:left; }
.ui-tabs .ui-tabs-hide { display: none !important; }

<script type="text/javascript">
	$(function() {
		$( "#tabsTWO" ).tabs({ selected: 0 });
	});
</script>

<div id="tabsTWO">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Tab1 content</p>
	</div>
	<div id="tabs-2">
		<p>Tab2 content</p>
	</div>
	<div id="tabs-3">
		<p>Tab3 content</p>
	</div>
</div>

#tabsTWO .ui-tabs { width:600px; position: relative; padding: 1px; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
#tabsTWO .ui-tabs .ui-tabs-nav { margin: 0; padding: 1px 1px 0; float:none; }
#tabsTWO .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 1px 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
#tabsTWO .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
#tabsTWO .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px;}
#tabsTWO .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a,  .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text;  background-color:#EEEEEE;}
#tabsTWO .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; background-color:#CCCCCC; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
#tabsTWO .ui-tabs .ui-tabs-panel { width: 600px; display: block; border-width: 0; padding: 4px; background-color:#EEEEEE; text-align:left; }
#tabsTWO .ui-tabs .ui-tabs-hide { display: none !important; }