JacobLett · September 18, 2015 19:09
diff --git a/gistfile1.txt b/gistfile1.txt

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset='utf-8'>
 		<title>jQuery Tabs Demo</title>
 		<style>
 			* {padding:0; margin:0;}

 			html {
 				background:url(/img/tiles/wood.png) 0 0 repeat;
 				padding:15px 15px 0;
 				font-family:sans-serif;
 				font-size:14px;
 			}

 			p, h3 { 
 				margin-bottom:15px;
 			}

 			div {
 				padding:10px;
 				width:600px;
 				background:#fff;
 			}

 			.tabs li {
 				list-style:none;
 				display:inline;
 			}

 			.tabs a {
 				padding:5px 10px;
 				display:inline-block;
 				background:#666;
 				color:#fff;
 				text-decoration:none;
 			}

 			.tabs a.active {
 				background:#fff;
 				color:#000;
 			}

 		</style>
 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 		<script>
 			// Wait until the DOM has loaded before querying the document
 			$(document).ready(function(){
 				$('ul.tabs').each(function(){
 					// For each set of tabs, we want to keep track of
 					// which tab is active and it's associated content
 					var $active, $content, $links = $(this).find('a');

 					// If the location.hash matches one of the links, use that as the active tab.
 					// If no match is found, use the first link as the initial active tab.
 					$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
 					$active.addClass('active');

 					$content = $($active[0].hash);

 					// Hide the remaining content
 					$links.not($active).each(function () {
 						$(this.hash).hide();
 					});

 					// Bind the click event handler
 					$(this).on('click', 'a', function(e){
 						// Make the old tab inactive.
 						$active.removeClass('active');
 						$content.hide();

 						// Update the variables with the new link and content
 						$active = $(this);
 						$content = $(this.hash);

 						// Make the tab active.
 						$active.addClass('active');
 						$content.show();

 						// Prevent the anchor's default click action
 						e.preventDefault();
 					});
 				});
 			});
 		</script>
 	</head>
 	<body>
 		<ul class='tabs'>
 			<li><a href='#tab1'>Tab 1</a></li>
 			<li><a href='#tab2'>Tab 2</a></li>
 			<li><a href='#tab3'>Tab 3</a></li>
 		</ul>
 		<div id='tab1'>
 			<h3>Section 1</h3>
 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
 		</div>
 		<div id='tab2'>
 			<h3>Section 2</h3>
 			<p>Aenean et est tortor. In pharetra pretium convallis. Mauris sollicitudin ligula non mi hendrerit varius. Fusce convallis hendrerit mauris, eu accumsan nisl aliquam eu.</p>
 		</div>
 		<div id='tab3'>
 			<h3>Section 3</h3>
 			<p>Suspendisse potenti. Morbi laoreet magna vitae est mollis ultricies. Mauris eget enim ac justo eleifend malesuada. Proin non consectetur est. Integer semper laoreet porta. Praesent facilisis leo nec libero tincidunt blandit.</p>
 		</div>
 	</body>
 </html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>jQuery Tabs Demo</title>
	<style>
	* {padding:0; margin:0;}

	html {
	background:url(/img/tiles/wood.png) 0 0 repeat;
	padding:15px 15px 0;
	font-family:sans-serif;
	font-size:14px;
	}

	p, h3 {
	margin-bottom:15px;
	}

	div {
	padding:10px;
	width:600px;
	background:#fff;
	}

	.tabs li {
	list-style:none;
	display:inline;
	}

	.tabs a {
	padding:5px 10px;
	display:inline-block;
	background:#666;
	color:#fff;
	text-decoration:none;
	}

	.tabs a.active {
	background:#fff;
	color:#000;
	}

	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script>
	// Wait until the DOM has loaded before querying the document
	$(document).ready(function(){
	$('ul.tabs').each(function(){
	// For each set of tabs, we want to keep track of
	// which tab is active and it's associated content
	var $active, $content, $links = $(this).find('a');

	// If the location.hash matches one of the links, use that as the active tab.
	// If no match is found, use the first link as the initial active tab.
	$active = $($links.filter('[href="'+location.hash+'"]')[0] \|\| $links[0]);
	$active.addClass('active');

	$content = $($active[0].hash);

	// Hide the remaining content
	$links.not($active).each(function () {
	$(this.hash).hide();
	});

	// Bind the click event handler
	$(this).on('click', 'a', function(e){
	// Make the old tab inactive.
	$active.removeClass('active');
	$content.hide();

	// Update the variables with the new link and content
	$active = $(this);
	$content = $(this.hash);

	// Make the tab active.
	$active.addClass('active');
	$content.show();

	// Prevent the anchor's default click action
	e.preventDefault();
	});
	});
	});
	</script>
	</head>
	<body>
	<ul class='tabs'>
	<li><a href='#tab1'>Tab 1</a></li>
	<li><a href='#tab2'>Tab 2</a></li>
	<li><a href='#tab3'>Tab 3</a></li>
	</ul>
	<div id='tab1'>
	<h3>Section 1</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
	</div>
	<div id='tab2'>
	<h3>Section 2</h3>
	<p>Aenean et est tortor. In pharetra pretium convallis. Mauris sollicitudin ligula non mi hendrerit varius. Fusce convallis hendrerit mauris, eu accumsan nisl aliquam eu.</p>
	</div>
	<div id='tab3'>
	<h3>Section 3</h3>
	<p>Suspendisse potenti. Morbi laoreet magna vitae est mollis ultricies. Mauris eget enim ac justo eleifend malesuada. Proin non consectetur est. Integer semper laoreet porta. Praesent facilisis leo nec libero tincidunt blandit.</p>
	</div>
	</body>
	</html>
No results found