Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html><head>
- <script src="http://code.jquery.com/jquery.js"></script>
- <style>
- .tabs {
- border-bottom:1px solid #ccc;
- height:auto;
- margin:0 0 .75em 0;
- overflow:auto;
- }
- * html .tabs { height:1%; } /* Fixing IE 6 */
- .tabs li {
- border:1px solid #ccc;
- border-bottom:none;
- float:left;
- line-height:1.5;
- list-style-type:none;
- margin:0 .25em 0 0;
- padding:0;
- }
- .tabs li a {
- background:#ddd;
- border:1px solid #eee;
- border-bottom:none;
- color:#222;
- cursor:pointer;
- display:block;
- float:left;
- font-weight:bold;
- padding:.15em .33em .25em .33em;
- }
- .tabs li a.selected {
- background:#666;
- border:1px solid #666;
- border-bottom:none;
- color:#fff;
- cursor:default;
- }
- .tabs li a, .tabs li a:focus, .tabs li a:hover {
- text-decoration:none;
- }
- .tabs li a:focus, .tabs li a:hover {
- color:#555;
- outline:none;
- }
- .tabs li a.selected:focus, .tabs li a.selected:hover {
- color:#fafafa;
- }
- .tabs li.label {
- border:none;
- font-weight:bold;
- line-height:1.5;
- margin-right:.5em;
- padding:.25em .33em .25em .33em;
- }
- </style></head>
- <body>
- <div class="container">
- <div class="column span-24 last" id="tab-set">
- <ul class="tabs">
- <li class="label" style="display: none; ">This is a
- "label":</li>
- <li><a href="#text1" class="selected">Tab 1</a></li>
- <li><a href="#text2">Tab 2</a></li>
- <li><a href="#text3">Tab 3</a></li>
- </ul>
- <div id="text1" style="display: block; ">
- <p>Lorem Ipsum is simply dummy text of the printing and
- typesetting industry. Lorem Ipsum has been the industry's standard
- dummy text ever since the 1500s, when an unknown printer took a galley
- of type and scrambled it to make a type specimen book. It has survived
- not only five centuries, but also the leap into electronic typesetting,
- remaining essentially unchanged. It was popularised in the 1960s with
- the release of Letraset sheets containing Lorem Ipsum passages, and
- more recently with desktop publishing software like Aldus PageMaker
- including versions of Lorem Ipsum.</p>
- </div>
- <div id="text2" style="display: none; ">
- <p>Contrary to popular belief, Lorem Ipsum is not simply random
- text. It has roots in a piece of classical Latin literature from 45 BC,
- making it over 2000 years old. Richard McClintock, a Latin professor at
- Hampden-Sydney College in Virginia, looked up one of the more obscure
- Latin words, consectetur, from a Lorem Ipsum passage, and going through
- the cites of the word in classical literature, discovered the
- undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
- of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
- Cicero, written in 45 BC. This book is a treatise on the theory of
- ethics, very popular during the Renaissance. The first line of Lorem
- Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
- 1.10.32.</p>
- </div>
- <div id="text3" style="display: none; ">
- <p>It is a long established fact that a reader will be
- distracted by the readable content of a page when looking at its
- layout. The point of using Lorem Ipsum is that it has a more-or-less
- normal distribution of letters, as opposed to using 'Content here,
- content here', making it look like readable English. Many desktop
- publishing packages and web page editors now use Lorem Ipsum as their
- default model text, and a search for 'lorem ipsum' will uncover many
- web sites still in their infancy. Various versions have evolved over
- the years, sometimes by accident, sometimes on purpose (injected humour
- and the like).</p>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- $("ul.tabs li.label").hide();
- $("#tab-set > div").hide();
- $("#tab-set > div").eq(0).show();
- $("ul.tabs a").click(
- function() {
- $("ul.tabs a.selected").removeClass('selected');
- $("#tab-set > div").hide();
- $(""+$(this).attr("href")).fadeIn('slow');
- $(this).addClass('selected');
- }
- );
- $("#toggle-label").click( function() {
- $(".tabs li.label").toggle();
- return false;
- });
- $("ul.tabs a[href="+location.hash+"]").click();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment