"cadastro. pag "
Bootstrap 4.1.1 Snippet by raquel2020

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> div class="content"> <div class="tabs-content"> <div class="tabs-menu clearfix"> <ul> <li><a class="active-tab-menu" href="#" data-tab="tab1">Lorem</a></li> <li><a href="#" data-tab="tab2">Ipsum</a></li> <li><a href="#" data-tab="tab3">Dolor</a></li> </ul> </div> <!-- tabs-menu --> <div class="tab1 tabs first-tab"> Conteúdo da aba 1 </div> <!-- .tab1 --> <div class="tab2 tabs"> Conteúdo da aba 2 </div> <!-- .tab2 --> <div class="tab3 tabs"> Conteúdo da aba 3 </div> <!-- .tab3 --> </div> <!-- .tabs --> </div> <!-- .content -->
/* Geral */ * { margin: 0; padding: 0; box-sizing: border-box; font-size: 12px; line-height: 1.5; } body { background: #222222; } a:focus { outline: none; } .content { margin: 30px; } .clearfix:after { content: '.'; height: 0; font-size: 0; line-height: 0; display: block; clear: both; overflow: hidden; visibility: hidden; } /* Abas */ .tabs-content { background: #eee; font-family: sans-serif; } /* Menu das abas */ .tabs-menu { background: #0074a2; } .tabs-menu ul { list-style: none; } .tabs-menu ul li { float: left; } .tabs-menu ul li a { display: block; padding: 10px 20px; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; } .tabs-menu ul li a.active-tab-menu { background: #eee; color: #000; } /* Conteúdo das abas */ .tabs { display: none; padding: 30px; } .first-tab { display: block; }
jQuery(function($){ $('.tabs-menu ul li a').click(function(){ var a = $(this); var active_tab_class = 'active-tab-menu'; var the_tab = '.' + a.attr('data-tab'); $('.tabs-menu ul li a').removeClass(active_tab_class); a.addClass(active_tab_class); $('.tabs-content .tabs').css({ 'display' : 'none' }); $(the_tab).show(); return false; }); });

Related: See More


Questions / Comments: