jquery with modx

<script type="text/javascript">
$(document).ready(function() {
	$('.tabs a').click(function(){
		switch_tabs($(this));
	});
	switch_tabs($('.defaulttab'));
});
 
function switch_tabs(obj)
{
	$('.tab-content').hide();
	$('.tabs a').removeClass("selected");
	var id = obj.attr("rel");
 
	$('#'+id).show();
	obj.addClass("selected");
}
		</script>

<ul class="tabs">
<li><a class="defaulttab" rel="tabs1" href="[~[*id*]~]#one">Tab One</a></li>
<li><a rel="tabs2" href="[~[*id*]~]#two">Tab Two</a></li>
<li><a rel="tabs3" href="[~[*id*]~]#three">Tab Three</a></li>
<li><a rel="tabs4" href="[~[*id*]~]#four">Tab Four</a></li>
</ul>
<div id="tabs1" class="tab-content">

<a name="one" id="one"></a>

/* your content here */

</div>
<div id="tabs2" class="tab-content">
<a name="two" id="two"></a>

/* your content here */

</div>
<div id="tabs3" class="tab-content">
<a name="three" id="three"></a>

/* your content here */

</div>
<div id="tabs4" class="tab-content">
<a name="four" id="four"></a>

/* your content here */

</div>