Alcuinus

Linking to Blueprint CSS tabs

Jul 25th, 2011
369
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html><head>
  2. <script src="http://code.jquery.com/jquery.js"></script>
  3. <style>
  4. .tabs {
  5.     border-bottom:1px solid #ccc;
  6.   height:auto;
  7.     margin:0 0 .75em 0;
  8.     overflow:auto;
  9. }
  10. * html .tabs { height:1%; } /* Fixing IE 6 */
  11. .tabs li {
  12.   border:1px solid #ccc;
  13.   border-bottom:none;
  14.   float:left;
  15.   line-height:1.5;
  16.   list-style-type:none;
  17.   margin:0 .25em 0 0;
  18.   padding:0;
  19. }
  20. .tabs li a {
  21.     background:#ddd;
  22.   border:1px solid #eee;
  23.   border-bottom:none;
  24.   color:#222;
  25.   cursor:pointer;
  26.   display:block;
  27.   float:left;
  28.   font-weight:bold;
  29.   padding:.15em .33em .25em .33em;
  30. }
  31. .tabs li a.selected {
  32.   background:#666;
  33.   border:1px solid #666;
  34.   border-bottom:none;
  35.   color:#fff;
  36.   cursor:default;
  37. }
  38. .tabs li a, .tabs li a:focus, .tabs li a:hover {
  39.   text-decoration:none;
  40. }
  41. .tabs li a:focus, .tabs li a:hover {
  42.   color:#555;
  43.   outline:none;
  44. }
  45. .tabs li a.selected:focus, .tabs li a.selected:hover {
  46.   color:#fafafa;
  47. }  
  48. .tabs li.label {
  49.     border:none;
  50.     font-weight:bold;
  51.     line-height:1.5;
  52.     margin-right:.5em;
  53.     padding:.25em .33em .25em .33em;
  54. }
  55. </style></head>
  56.  
  57. <body>
  58.    
  59. <div class="container">
  60. <div class="column span-24 last" id="tab-set">
  61.    
  62.     <ul class="tabs">
  63.         <li class="label" style="display: none; ">This is a
  64.  
  65. "label":</li>
  66.         <li><a href="#text1" class="selected">Tab 1</a></li>
  67.         <li><a href="#text2">Tab 2</a></li>
  68.         <li><a href="#text3">Tab 3</a></li>
  69.     </ul>
  70.    
  71.     <div id="text1" style="display: block; ">
  72.         <p>Lorem Ipsum is simply dummy text of the printing and
  73.  
  74. typesetting industry. Lorem Ipsum has been the industry's standard
  75.  
  76. dummy text ever since the 1500s, when an unknown printer took a galley
  77.  
  78. of type and scrambled it to make a type specimen book. It has survived
  79.  
  80. not only five centuries, but also the leap into electronic typesetting,
  81.  
  82. remaining essentially unchanged. It was popularised in the 1960s with
  83.  
  84. the release of Letraset sheets containing Lorem Ipsum passages, and
  85.  
  86. more recently with desktop publishing software like Aldus PageMaker
  87.  
  88. including versions of Lorem Ipsum.</p>
  89.     </div>
  90.    
  91.     <div id="text2" style="display: none; ">
  92.         <p>Contrary to popular belief, Lorem Ipsum is not simply random
  93.  
  94. text. It has roots in a piece of classical Latin literature from 45 BC,
  95.  
  96. making it over 2000 years old. Richard McClintock, a Latin professor at
  97.  
  98. Hampden-Sydney College in Virginia, looked up one of the more obscure
  99.  
  100. Latin words, consectetur, from a Lorem Ipsum passage, and going through
  101.  
  102. the cites of the word in classical literature, discovered the
  103.  
  104. undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
  105.  
  106. of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
  107.  
  108. Cicero, written in 45 BC. This book is a treatise on the theory of
  109.  
  110. ethics, very popular during the Renaissance. The first line of Lorem
  111.  
  112. Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
  113.  
  114. 1.10.32.</p>
  115.     </div>
  116.    
  117.     <div id="text3" style="display: none; ">
  118.         <p>It is a long established fact that a reader will be
  119.  
  120. distracted by the readable content of a page when looking at its
  121.  
  122. layout. The point of using Lorem Ipsum is that it has a more-or-less
  123.  
  124. normal distribution of letters, as opposed to using 'Content here,
  125.  
  126. content here', making it look like readable English. Many desktop
  127.  
  128. publishing packages and web page editors now use Lorem Ipsum as their
  129.  
  130. default model text, and a search for 'lorem ipsum' will uncover many
  131.  
  132. web sites still in their infancy. Various versions have evolved over
  133.  
  134. the years, sometimes by accident, sometimes on purpose (injected humour
  135.  
  136. and the like).</p>
  137.     </div>
  138.    
  139. </div>    
  140. </div>
  141.  
  142. <script type="text/javascript">
  143.     $("ul.tabs li.label").hide();
  144.     $("#tab-set > div").hide();
  145.     $("#tab-set > div").eq(0).show();
  146.   $("ul.tabs a").click(
  147.       function() {
  148.           $("ul.tabs a.selected").removeClass('selected');
  149.           $("#tab-set > div").hide();
  150.           $(""+$(this).attr("href")).fadeIn('slow');
  151.           $(this).addClass('selected');
  152.       }
  153.   );
  154.   $("#toggle-label").click( function() {
  155.       $(".tabs li.label").toggle();
  156.       return false;
  157.   });
  158.     $("ul.tabs a[href="+location.hash+"]").click();
  159. </script>
  160.    
  161.  
  162. </body>
  163. </html>
Advertisement
Add Comment
Please, Sign In to add comment