Added url hash support to select a specific tab

samcroft · Jul 3, 2011 · 42f52f8 · 42f52f8
1 parent 06141c9
commit 42f52f8
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -32,21 +32,21 @@
 <body>
 
 	<dl>
-		<dt><a href="#">Episode IV</a></dt>
+		<dt id="ep1"><a href="#ep1">Episode IV</a></dt>
 		<dd>
 			<img src="http://dummyimage.com/155x240" alt="Dummy" width="155" height="240">
 			<p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>
 			<p>During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the Death Star, an armored space station with enough power to destroy an entire planet.</p>
 			<p>Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy...</p>
 		</dd>
-		<dt><a href="#">Episode V</a></dt>
+		<dt id="ep2"><a href="#ep2">Episode V</a></dt>
 		<dd>
 			<p>It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.</p>
 			<img src="http://dummyimage.com/155x240" alt="Dummy" width="155" height="240">
 			<p>Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.</p>
 			<p>The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space...</p>
 		</dd>
-		<dt><a href="#">Episode VI</a></dt>
+		<dt id="ep3"><a href="#ep3">Episode VI</a></dt>
 		<dd>
 			<p>Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.</p>
 			<p>Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.</p>
@@ -56,16 +56,16 @@
 	</dl>
 
 	<dl>
-		<dt><a href="#">Thundercats</a></dt>
+		<dt id="tc"><a href="#tc">Thundercats</a></dt>
 		<dd>
 			<img src="http://dummyimage.com/250x400" height="400" width="250" alt="dummy" />
 			<p>Thunder, thunder, thundercats, Ho! Thundercats are on the move, Thundercats are loose. Feel the magic, hear the roar, Thundercats are loose. Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thundercats!</p>
 		</dd>
-		<dt><a href="#">Knight Rider</a></dt>
+		<dt id="kr"><a href="#kr">Knight Rider</a></dt>
 		<dd>
 			<p>Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.</p>
 		</dd>
-		<dt><a href="#">The A-Team</a></dt>
+		<dt id="at"><a href="#at">The A-Team</a></dt>
 		<dd>
 			<p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team.</p>
 		</dd>

diff --git a/jquery.tabs.js b/jquery.tabs.js
@@ -2,15 +2,27 @@
 	$.fn.tabs = function() {
 		this.each(function() {
 			var el = $(this);
+			var current;
+
 			el.addClass('enhance');
 			var dlHeight = el.height();
 
 			el.find('dd').hide();
-			var current = el.find('dt:first').addClass('current');
+
+			var hash = location.hash;
+
+			var hasHash = el.find('a[href="'+hash+'"]');
+			if (hasHash.length) {
+				current = el.find('a[href="'+hash+'"]').parent().addClass('current');
+			} else {
+				current = el.find('dt:first').addClass('current');
+			}
+
 			var currentHeight = current.next('dd').show().height();
 			el.css('height', dlHeight + currentHeight);
 		});
 
+
 		$('dl.enhance dt a').click(function(e){
 			e.preventDefault();
 
@@ -19,7 +31,9 @@
 			var currentHeight = current.next('dd').show().height();
 			var dlHeight = $(this).parents('dl').removeAttr('style').height();
 
-			$(this).parents('dl').css('height', dlHeight + currentHeight);	
+			$(this).parents('dl').css('height', dlHeight + currentHeight);
+
+			location.hash = $(this).attr('href');
 		});
 	}
 })(jQuery);
diff --git a/jquery.tabs.min.js b/jquery.tabs.min.js
diff --git a/readme b/readme
@@ -5,17 +5,12 @@ Usage
 $('dl').tabs();
 
 <dl>
-	<dt><a href="">Your link title</a></dt>
+	<dt id="tab1"><a href="#tab1">Your link title</a></dt>
 	<dd>
 		<p>Your content.</p>
 	</dd>
-	<dt><a href="">Your link title</dt>
+	<dt id="tab2"><a href="#tab2">Your link title</dt>
 	<dd>
 		<p>Your content.</p>
 	</dd>
-</dl>
-
-
-To-do
-
-- Add :target selector/hash fragment support for RESTful url usage
+</dl>