use this for creating sliding tabbed pages
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js" language="javascript1.2"></script>
<script language="javascript1.2" type="text/javascript">
function slideTo(trgt, mLeft) {
$(trgt).parent().find('.active_tab').removeClass('active_tab');
$(trgt).addClass('active_tab');
$('#divTabbedSlider').animate({'margin-left':mLeft}, 500);
}
</script>
</head>
<body>
<div id="divTabbed">
<ul id="ulTabbedTabs">
<li class="liTabbedTab" onclick="slideTo(this, '0px');">Tab 1</li>
<li class="liTabbedTab" onclick="slideTo(this, '-600px');">Tab 2</li>
<li class="liTabbedTab" onclick="slideTo(this, '-1200px');">Tab 3</li>
<li class="liTabbedTab" onclick="slideTo(this, '-1800px');">Tab 4</li>
</ul>
<div id="divTabbedContent" style="width:600px; overflow:hidden;">
<div id="divTabbedSlider" style="width:2400px; overflow:hidden;">
<div id="divTabbedContent1" style="width:600px; float:left;">
Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content.
</div>
<div id="divTabbedContent2" style="width:600px; float:left;">
Tab 2 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content.
</div>
<div id="divTabbedContent3" style="width:600px; float:left;">
Tab 3 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content.
</div>
<div id="divTabbedContent4" style="width:600px; float:left;">
Tab 4 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content.
</div>
</div>
</div>
</div>
</body>
</html>
$(function () {
ReplyDeletevar tabContainers = $('div.tabs > div');
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
http://filamentgroup.com/examples/jquery-ui-themeroller-roundies/
ReplyDelete