mirror of
https://github.com/JangoSteve/jQuery-EasyTabs.git
synced 2025-12-24 12:13:57 +01:00
54 lines
2.3 KiB
HTML
54 lines
2.3 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
|
|
<head profile="http://gmpg.org/xfn/11">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
<title>JQuery EasyTabs Demo – Side Tabs - Alfa Jango Blog</title>
|
|
<script src="../javascripts/jquery-1.4.4.min.js" type="text/javascript"></script>
|
|
<script src="../javascripts/jquery.hashchange.min.js" type="text/javascript"></script>
|
|
<script src="../javascripts/jquery.easytabs.min.js" type="text/javascript"></script>
|
|
|
|
<style>
|
|
#tab-container { border: solid 1px; height: 300px; }
|
|
#tab-container ul { height: 300px; list-style: none; margin: 0; padding: 0; background: #ccc; float: left; border-right: solid 1px; }
|
|
#tab-container ul li { width: 100px; margin: 0; padding: 0; text-align: center; }
|
|
#tab-container ul li a { display: block; padding: 15px 0; outline: none; }
|
|
#tab-container ul li a:hover { text-decoration: underline; }
|
|
#tab-container ul li.selected-tab { background: #fff; position: relative; left: 1px; border-style: solid; border-width: 1px 0; }
|
|
#tab-container ul li:first-child.selected-tab { border-top: none; }
|
|
#tab-container ul li a.selected-tab { font-weight: bold; text-decoration: none; }
|
|
#tab-container .panel-container { padding-top: 5px; padding-left: 120px; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){ $('#tab-container').easytabs({
|
|
animate: false,
|
|
tabActiveClass: "selected-tab",
|
|
panelActiveClass: "displayed"
|
|
}); });
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="tab-container">
|
|
<ul>
|
|
<li><a href="#tab-1-div">Tab 1</a></li>
|
|
<li><a href="#that-other-tab">The Second Tab</a></li>
|
|
<li><a href="#lastly">Tab C</a></li>
|
|
<br style="clear:both;" />
|
|
</ul>
|
|
<div class="panel-container">
|
|
<div id="tab-1-div">
|
|
<h2>Configurations</h2>
|
|
<p>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.</p>
|
|
</div>
|
|
<div id="that-other-tab">
|
|
<h2>Heading 2</h2>
|
|
<p>Stuff from the second tab.</p>
|
|
</div>
|
|
<div id="lastly">
|
|
<h2>Heading 3</h2>
|
|
<p>More stuff from the last tab.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|