Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
- <title>Sistema de abas</title>
- <style type="text/css">
- ul{list-style:none}
- #nav{
- width:500px;
- }
- #nav li{
- display:inline;
- }
- #nav li a{
- color:#333;
- border:1px solid #ccc;
- padding:10px 5px;
- text-decoration:none;
- }
- .abas{
- width:500px;
- border:1px solid #ccc;
- height:300px;
- }
- #consultoria{background:#f5f5f5}
- #web{background:#e5e5e5}
- </style>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $(".abas:not(:first)").hide();
- $("#nav a ").click(function(){
- var div = $(this).attr('href');
- $('.abas').hide();
- $(div).show();
- return false;
- });
- $(".frmBtn").click(function(){
- var div = $(this).attr('rel');
- $('.abas').hide();
- $(div).show();
- return false;
- })
- });
- </script>
- </head>
- <body>
- <ul id="nav">
- <li><a href="#consultoria">Consultoria</a></li>
- <li><a href="#web">Web</a></li>
- <li><a href="#cobranca">Cobrança</a></li>
- </ul>
- <form action="" method="post">
- <div id="consultoria" class="abas">
- <h1>Consultoria</h1>
- <input type="button" class="frmBtn" rel="#web" value="Próximo - Web" />
- </div>
- <div id="web" class="abas">
- <h1>Web</h1>
- <input type="button" class="frmBtn" rel="#cobranca" value="Próximo - Cobrança" />
- </div>
- <div id="cobranca" class="abas">
- <h1>Cobrança</h1>
- </div>
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement