Created
June 8, 2010 12:39
-
-
Save mrandyclark/429953 to your computer and use it in GitHub Desktop.
Easy jQuery Tabs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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" xml:lang="en" lang="en"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
<title>Simple Tabs</title> | |
<script type="text/javascript" language="javascript" src="jquery-1.4.1.min.js"></script> | |
<script> | |
$(document).ready(function(){ | |
$("#tabs ul li").click( function() { | |
$("#tabs ul .active").removeClass("active"); | |
$(this).addClass("active"); | |
$("#tab-content").children().hide(); | |
$("#tab-content #" + $(this).attr("_tab")).show(); | |
}); | |
}); | |
</script> | |
<style> | |
ul.tabs { cursor: pointer; margin: 0px; padding: 0px; position: relative; top: 1px;} | |
ul.tabs li { display: inline; margin: 0px 3px; height: 20px; line-height: 30px; border: 1px solid #000; padding: 5px 10px; background-color: #dedede;} | |
ul.tabs li.active { border-bottom: 1px solid #fff; background-color: #fff;} | |
.tab-content { padding: 10px; border: 1px solid #000; width: 800px;} | |
</style> | |
</head> | |
<body> | |
<div id="tabs"> | |
<ul class="tabs"> | |
<li _tab="alice" class="active">Carroll</li> | |
<li _tab="pride">Austen</li> | |
<li _tab="tomsawyer">Twain</li> | |
</ul> | |
</div> | |
<div id="tab-content" class="tab-content"> | |
<div id="alice"> | |
<h2>Alice in Wonderland</h2> | |
<p>CHAPTER I. Down the Rabbit-Hole</p> | |
<p>Alice was beginning to get very tired of sitting by her sister on the | |
bank, and of having nothing to do: once or twice she had peeped into the | |
book her sister was reading, but it had no pictures or conversations in | |
it, 'and what is the use of a book,' thought Alice 'without pictures or | |
conversation?'</p> | |
<p>So she was considering in her own mind (as well as she could, for the | |
hot day made her feel very sleepy and stupid), whether the pleasure | |
of making a daisy-chain would be worth the trouble of getting up and | |
picking the daisies, when suddenly a White Rabbit with pink eyes ran | |
close by her.</p> | |
<p>There was nothing so VERY remarkable in that; nor did Alice think it so | |
VERY much out of the way to hear the Rabbit say to itself, 'Oh dear! | |
Oh dear! I shall be late!' (when she thought it over afterwards, it | |
occurred to her that she ought to have wondered at this, but at the time | |
it all seemed quite natural); but when the Rabbit actually TOOK A WATCH | |
OUT OF ITS WAISTCOAT-POCKET, and looked at it, and then hurried on, | |
Alice started to her feet, for it flashed across her mind that she had | |
never before seen a rabbit with either a waistcoat-pocket, or a watch | |
to take out of it, and burning with curiosity, she ran across the field | |
after it, and fortunately was just in time to see it pop down a large | |
rabbit-hole under the hedge.</p> | |
</div> | |
<div id="pride" style="display: none;"> | |
<h2>Pride and Prejudice</h2> | |
<p>Chapter 1 | |
<p>It is a truth universally acknowledged, that a single man in possession | |
of a good fortune, must be in want of a wife.</p> | |
<p>However little known the feelings or views of such a man may be on his | |
first entering a neighbourhood, this truth is so well fixed in the minds | |
of the surrounding families, that he is considered the rightful property | |
of some one or other of their daughters.</p> | |
<p>"My dear Mr. Bennet," said his lady to him one day, "have you heard that | |
Netherfield Park is let at last?"</p> | |
<p>Mr. Bennet replied that he had not.</p> | |
<p>"But it is," returned she; "for Mrs. Long has just been here, and she | |
told me all about it."</p> | |
<p>Mr. Bennet made no answer.</p> | |
<p>"Do you not want to know who has taken it?" cried his wife impatiently.</p> | |
<p>"_You_ want to tell me, and I have no objection to hearing it."</p> | |
<p>This was invitation enough.</p> | |
</div> | |
<div id="tomsawyer" style="display: none;"> | |
<h2>The Adventures of Tom Sawyer</h2> | |
<p>CHAPTER I</p> | |
<p>"TOM!"</p> | |
<p>No answer.</p> | |
<p>"TOM!"</p> | |
<p>No answer.</p> | |
<p>"What's gone with that boy, I wonder? You TOM!"</p> | |
<p>No answer.</p> | |
<p>The old lady pulled her spectacles down and looked over them about the | |
room; then she put them up and looked out under them. She seldom or | |
never looked THROUGH them for so small a thing as a boy; they were her | |
state pair, the pride of her heart, and were built for "style," not | |
service--she could have seen through a pair of stove-lids just as well. | |
She looked perplexed for a moment, and then said, not fiercely, but | |
still loud enough for the furniture to hear:</p> | |
<p>"Well, I lay if I get hold of you I'll--"</p> | |
<p>She did not finish, for by this time she was bending down and punching | |
under the bed with the broom, and so she needed breath to punctuate the | |
punches with. She resurrected nothing but the cat.</p> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment