Menu
Home
Download Files

Tabs

Jump Link examples

1st Title

Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Title Number 2

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Another Title (aka #3)

Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Overview

This is your general tabs plugin, but it also has support for when a user is coming from another page on the site or an external link.

HTML


<section id="tabs1" class="tabs-area">
	<nav class="tabs-nav">
		<ul>
			<li><a href="#sct-tab1" title="Tab 1">Tab 1</a></li>
			<li><a href="#sct-tab2" title="Tab 2">Tab 2</a></li>
		</ul>
	</nav>
	<div class="tabs-content">
		<article id="sct-tab1" class="tab-sct">
			<p>INSERT CONTENT</p>
		</article>
		<article id="sct-tab2" class="tab-sct">
			<p>INSERT CONTENT</p>
		</article>
	</div>
</section>

Default CSS


.tabs-area{}
	.tabs-nav{text-align:center; margin:0 0 30px 0;}
		.tabs-nav li{display: inline-block; padding:0 15px;}
		.tabs-nav a{display: block;}
	.tabs-content{}
	.js .tabs-content{overflow: hidden; height:0; position: relative;}
		.js .tab-sct{position: absolute; top:0; left:0; width:100%;}

Add jQuery & Plugin


<script src="js/libs/jquery.js"></script>
<script src="js/tabs.js"></script>

Initialize Plugin


$(function(){
	
	// Init - File Input 
	$('#tabs1').myTabs();
	
});