Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Sep 14th, 2011  |  syntax: JavaScript  |  size: 3.75 KB  |  views: 155  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.  
  2. <html>
  3.  
  4. <head>
  5.  
  6.  
  7.  
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  9.  
  10.  
  11.  
  12. <script type="text/javascript">
  13.  
  14. $(function() {
  15.  
  16.    
  17.  
  18.     // A helper function that allows multiple LI elements to be either
  19.  
  20.     // faded in or out or slide toggled up and down
  21.  
  22.     function fadeOutItems(ele, delay) {
  23.  
  24.         var $$ = $(ele), $n = $$.next();
  25.  
  26.        
  27.  
  28.         // Toggle the active class
  29.  
  30.         $$.toggleClass('active');
  31.  
  32.        
  33.  
  34.         // Ensure the next element exists and has the correct nodeType
  35.  
  36.         // of an unordered list aka "UL"
  37.  
  38.         if ($n.length && $n[0].nodeName === 'UL') {
  39.  
  40.             $('li', $n).each(function(i) {
  41.  
  42.                 // Determine whether to use a fade effect or a very quick
  43.  
  44.                 // sliding effect
  45.  
  46.                 delay ? $(this).delay(i * 400).fadeToggle('slow') : $(this).slideToggle('fast');
  47.  
  48.             });
  49.  
  50.         }
  51.  
  52.     }
  53.  
  54.    
  55.  
  56.     // Retrieves the URL parameters from the window object and allows
  57.  
  58.     // for custom query parameter requests by name
  59.  
  60.     function getParameterByName(name) {
  61.  
  62.         name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');
  63.  
  64.        
  65.  
  66.         var regexS  = '[\\?&]' + name + '=([^&#]*)';
  67.  
  68.         var regex   = new RegExp(regexS);
  69.  
  70.         var results = regex.exec(window.location.href);
  71.  
  72.        
  73.  
  74.         if (results === null) {
  75.  
  76.             return false;
  77.  
  78.         } else {
  79.  
  80.             return decodeURIComponent(results[1].replace(/\+/g, ' '));
  81.  
  82.         }
  83.  
  84.     }
  85.  
  86.    
  87.  
  88.     // This is the jQuery event that controls the click event for the
  89.  
  90.     // tabs on the page by using a class to cut down on code
  91.  
  92.     $('a', '.tabs').click(function(e) {
  93.  
  94.         e.preventDefault();
  95.  
  96.        
  97.  
  98.         // Check on the other tabs, if the anchor link contains the
  99.  
  100.         // class "active" fade out the UL list items
  101.  
  102.         var $ca = $('a.active', '.tabs');
  103.  
  104.        
  105.  
  106.         if ($ca.length) {
  107.  
  108.             // Check the currently selected tab against the one just clicked,
  109.  
  110.             // if they are the same end the code right here!
  111.  
  112.             if ($(this).parent().attr('id') === $ca.parent().attr('id')) {
  113.  
  114.                 return false;
  115.  
  116.             }
  117.  
  118.            
  119.  
  120.             fadeOutItems($ca, false);
  121.  
  122.         }
  123.  
  124.        
  125.  
  126.         fadeOutItems(this, true);
  127.  
  128.     });
  129.  
  130.    
  131.  
  132.     // Check the URL query string, if a tab hash is present we can
  133.  
  134.     // force the click event on the selected tab
  135.  
  136.     //
  137.  
  138.     // Eg. http://www.example.com/my-page.html#tab2
  139.  
  140.     var query = getParameterByName('tab');
  141.  
  142.    
  143.  
  144.     if (query !== false) {
  145.  
  146.         document.getElementById(query)[0].click();
  147.  
  148.     }
  149.  
  150.  
  151.  
  152. });
  153.  
  154. </script>
  155.  
  156.  
  157.  
  158. <style type="text/css">
  159.  
  160. body {
  161.  
  162.     font-family: Arial;
  163.  
  164.     font-size: 13px;
  165.  
  166.     line-height: 16px;
  167.  
  168. }
  169.  
  170.  
  171.  
  172. .tabs a {
  173.  
  174.     background-color: #dedede;
  175.  
  176.     color: #565656;
  177.  
  178.     display: block;
  179.  
  180.     margin-bottom: 5px;
  181.  
  182.     padding: 5px 8px;
  183.  
  184.     text-decoration: none;
  185.  
  186. }
  187.  
  188.  
  189.  
  190. .tabs ul {
  191.  
  192.     margin: 0 0 10px;
  193.  
  194.     padding: 0;
  195.  
  196. }
  197.  
  198.  
  199.  
  200. .tabs li {
  201.  
  202.     background-color: #eee;
  203.  
  204.     border: 1px solid #ccc;
  205.  
  206.     color: #1a1a1a;
  207.  
  208.     display: none;
  209.  
  210.     border-radius: 5px;
  211.  
  212.     margin-bottom: 1px;
  213.  
  214.     padding: 5px 10px;
  215.  
  216. }
  217.  
  218. </style>
  219.  
  220.  
  221.  
  222. </head>
  223.  
  224.  
  225.  
  226.         <body>
  227.  
  228.        
  229.  
  230.                 <div id="tab1" class="tabs">
  231.  
  232.                         <a href="#">Tab 1</a>
  233.  
  234.                        
  235.  
  236.                         <ul>
  237.  
  238.                                 <li>1</li>
  239.  
  240.                                 <li><a href="http://www.google.com/">2</a></li>
  241.  
  242.                                 <li>3</li>
  243.  
  244.                         </ul>
  245.  
  246.                 </div>
  247.  
  248.  
  249.  
  250.                 <div id="tab2" class="tabs">
  251.  
  252.                         <a href="#">Tab 2</a>
  253.  
  254.                        
  255.  
  256.                         <ul>
  257.  
  258.                                 <li>4</li>
  259.  
  260.                                 <li>5</li>
  261.  
  262.                                 <li>6</li>
  263.  
  264.                         </ul>
  265.  
  266.                 </div>
  267.  
  268.                
  269.  
  270.         </body>
  271.  
  272.  
  273.  
  274. </html>