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: droidus on May 26th, 2012  |  syntax: HTML  |  size: 1.07 KB  |  views: 4  |  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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style>
  5. .tabs {
  6. display: block;
  7. }
  8. </style>
  9. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
  10.  
  11. <script type="text/javascript">
  12. $(function() {
  13.         $('#nav a').click(function() {
  14.         var index = $(this).index();
  15.         $('.panel').hide().eq(index).fadeIn();
  16.         return false;
  17.         })​
  18. })
  19.         </script>
  20.     <style>
  21.         .panel{ display:none}
  22. .panel:first-child{ display:block}
  23. </style>
  24. <link href="css/styles.css" rel="stylesheet" type="text/css" />
  25. </head>
  26.    
  27.     <body>
  28.    
  29.     <div><a href="google.com" class="tabs">this is a test</a></div>
  30.     <br /><br />
  31.     <div id="nav">
  32.     <a href="#">Content 1</a>
  33.     <a href="#">Content 2</a>
  34.     <a href="#">Content 3</a>
  35. </div>
  36.  
  37. <div id="content">
  38.     <div class="panel">Content 1 Text</div>
  39.     <div class="panel">Content 2 Text</div>
  40.     <div class="panel">Content 3 Text</div>
  41. </div>
  42.  
  43. </body>
  44. </html>