This is the content of the first tab.
-- Hi there. I'm the first div in ajax_content.html. -
-- I'm some other content from ajax_content.html. -
-This is the content of the first tab.
-Stuff from the second tab.
-More stuff from the last tab.
-This is the content of the first tab.
-This example displays the second tab by default. Also, the tab-switching animation is slowed down to 4 seconds (2sec fade-out and 2sec fade-in).
-More stuff from the last tab.
-This is the content of the first tab.
-Stuff from the second tab.
-More stuff from the last tab.
-
+
+<div id="tab-container" class="tab-container">
+ <ul class='etabs'>
+ <li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
+ <li class='tab'><a href="#tabs1-js">Required JS</a></li>
+ <li class='tab'><a href="#tabs1-css">Example CSS</a></li>
+ </ul>
+ <div id="tabs1-html">
+ <h2>HTML Markup for these tabs</h2>
+ <!-- content -->
+ </div>
+ <div id="tabs1-js">
+ <h2>JS for these tabs</h2>
+ <!-- content -->
+ </div>
+ <div id="tabs1-css">
+ <h2>CSS Styles for these tabs</h2>
+ <!-- content -->
+ </div>
+</div>
+
+
+
+ The HTML markup for your tabs and content can be arranged however you want. At the minimum, you need a container, a collection of links for your tabs (an unordered list by default), and matching divs for your tabbed content. Make sure the tab href attributes match the
+id of the target panel. This is standard semantic markup for in-page anchors.
The class names above are just to make it easy to style. You can make them whatever you want, there's no magic here.
+
+
+<script src="/javascripts/jquery.js" type="text/javascript"></script>
+<script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script>
+<script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script>
+
+
+
+ Optionally include the jquery hashchange plugin (recommended) or address plugin to enable forward- +and back-button functionality.
+ +
+
+$('#tab-container').easytabs();
+
+
+
+
+
+.etabs { margin: 0; padding: 0; }
+.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
+.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
+.tab a:hover { text-decoration: underline; }
+.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
+.tab a.active { font-weight: bold; }
+.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
+
+
+
+ This information is not contained in the tabbed content and situated between the tabs and content divs
-This is the content of the first tab.
-Stuff from the second tab.
-More stuff from the last tab.
-This is the content of the first tab.
-This tab has a lot of content, and so it's larger than the others.
-The lim'rick packs laughs anatomical
-In space that is quite economical,
-But the good ones I've seen
-So seldom are clean,
-And the clean ones so seldom are comical.
-More stuff from the last tab.
-This is the content of the first tab.
-Stuff from the second tab.
-More stuff from the last tab.
-This is the content of the first tab.
-- -
-- -
-Stuff from the second tab.
-More stuff from the last tab.
-This is the content of the first tab.
-This example displays the second tab by default. Also, the tab-switching animation is slowed down to 2 seconds (1sec fade-out and 1sec fade-in).
-More stuff from the last tab.
-This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.
-Stuff from the second tab.
-More stuff from the last tab.
-This is the content of the first tab.
-Stuff from the second tab.
-This is the content of the first tab.
-Stuff from the second tab.
-More stuff from the last tab.
-This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.
-Stuff from the second tab.
-More stuff from the last tab.
-