Advertisement
Guest User

Untitled

a guest
Dec 28th, 2010
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.  <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5.     <title>Sistema de abas</title>
  6.     <style type="text/css">
  7.         ul{list-style:none}
  8.         #nav{
  9.             width:500px;
  10.         }
  11.         #nav li{
  12.             display:inline;
  13.         }
  14.         #nav li a{
  15.             color:#333;
  16.             border:1px solid #ccc;
  17.             padding:10px 5px;
  18.             text-decoration:none;
  19.         }
  20.    
  21.         .abas{
  22.             width:500px;
  23.             border:1px solid #ccc;
  24.             height:300px;
  25.            
  26.         }
  27.         #consultoria{background:#f5f5f5}
  28.         #web{background:#e5e5e5}
  29.        
  30.        
  31.     </style>
  32.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  33.     <script type="text/javascript">
  34.         $(function(){
  35.             $(".abas:not(:first)").hide();
  36.            
  37.            
  38.             $("#nav a ").click(function(){
  39.                 var div  = $(this).attr('href');
  40.                
  41.                 $('.abas').hide();
  42.                 $(div).show();
  43.                 return false;
  44.             });
  45.            
  46.             $(".frmBtn").click(function(){
  47.             var div  = $(this).attr('rel');
  48.                 $('.abas').hide();
  49.                 $(div).show();
  50.                 return false;
  51.             })
  52.            
  53.         });
  54.     </script>
  55.  </head>
  56.  <body>
  57.     <ul id="nav">
  58.         <li><a href="#consultoria">Consultoria</a></li>
  59.         <li><a href="#web">Web</a></li>
  60.         <li><a href="#cobranca">Cobrança</a></li>
  61.     </ul>
  62.    
  63.     <form action="" method="post">
  64.     <div id="consultoria" class="abas">
  65.         <h1>Consultoria</h1>
  66.        
  67.         <input type="button" class="frmBtn" rel="#web" value="Próximo - Web" />
  68.     </div>
  69.     <div id="web" class="abas">
  70.             <h1>Web</h1>
  71.                 <input type="button" class="frmBtn" rel="#cobranca" value="Próximo - Cobrança" />
  72.     </div>
  73.     <div id="cobranca" class="abas">
  74.             <h1>Cobrança</h1>
  75.     </div>
  76.     </form>
  77.    
  78.  </body>
  79.  </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement