Sistema de abas em página HTML

Item: Sistema de abas em página HTML
Rating: 1

por ZombieW 19.09.16 10:43

Detalhes da questão

Endereço do fórum: www.tutorialdoca.com
Versão do fórum: PhpBB3

Descrição

Bom dia,

Neste tópico, me ajudaram a criar um sistema de abas para o meu fórum, que pode ser visto funcionando neste tópico.

Porém, estou tentando usar fazer o mesmo sistema em uma página HTML, sem sucesso.

Código:

Código:: <style type="text/css"> /*Título para páginas HTML * by DropLeet */ .Titulo { color: #ddd; font-family: Verdana, Tahoma, sans-serif; font-variant: small-caps; font-size: 17pt; text-align: center; text-shadow: 0 2px 5px black; line-height: 250%; background-image:url('http://img835.imageshack.us/img835/5259/bgtitulo.png'); background-size: 50%, 50%; /* CSS3 */ -moz-background-size: 50%, 50%; /* Firefox 3.6 */ background-repeat: no-repeat; background-position: center; } table { font-size: 10px !important; } </style> <html> <head> <link href='http://i57.servimg.com/u/f57/17/53/75/18/tutori13.png' rel='icon' type='image/x-icon' /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Conjuntos</title> </head> <body id="phpbb"> <div class="conteneur_minwidth_IE"><div class="conteneur_layout_IE"><div class="conteneur_container_IE"><div id="wrap"><a id="top" name="top" accesskey="t"></a><div id="page-header"><div class="headerbar"><div class="inner"><span class="corners-top"><span></span></span><div id="logo-desc"><a href="/forum" id="logo"><img src="http://s4.uploads.im/S8yN7.gif" alt="Tutorial do CA" /></a><div id="site-title">Tutorial do CA</div><p>O seu Database detalhado sobre o FPS Combat Arms Brasil.</p></div><span class="corners-bottom"><span></span></span></div></div><div class="navbar"><div class="inner"><span class="corners-top"><span></span></span><ul class="linklist navlinks"><li><a class="mainmenu" href="/forum"><img id="i_icon_mini_index" src="http://i43.servimg.com/u/f43/17/53/75/18/vinici10.png" border="0" hspace="0" alt="Início" title="Início" /></a></li><li><a class="mainmenu" href="/admin/index.forum?part=admin&sid=8af4651b7b395167ceef"><img src="http://i43.servimg.com/u/f43/17/53/75/18/vpcont10.png" border="0" hspace="0" alt="Painel de Controle" title="Painel de Controle" /></a></li><li><a class="mainmenu" href="/"><img id="i_icon_mini_portal" src="http://i43.servimg.com/u/f43/17/53/75/18/vporta10.png" border="0" hspace="0" alt="Portal" title="Portal" /></a></li><li><a class="mainmenu" href="/calendar"><img id="i_icon_mini_calendar" src="http://i43.servimg.com/u/f43/17/53/75/18/vcalen10.png" border="0" hspace="0" alt="Calendário" title="Calendário" /></a></li><li><a class="mainmenu" href="/faq"><img id="i_icon_mini_faq" src="http://i43.servimg.com/u/f43/17/53/75/18/vfaq10.png" border="0" hspace="0" alt="FAQ" title="FAQ" /></a></li><li><a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;"><img id="i_icon_mini_search" src="http://i43.servimg.com/u/f43/17/53/75/18/vprocu10.png" border="0" hspace="0" alt="Buscar" title="Buscar" /></a><script type="text/javascript">//<![CDATA[ var url_search = '/search'; insert_search_menu_new();//]]> </script></li><li><a class="mainmenu" href="/memberlist" rel="nofollow"><img id="i_icon_mini_members" src="http://i43.servimg.com/u/f43/17/53/75/18/vmembr10.png" border="0" hspace="0" alt="Membros" title="Membros" /></a></li><li><a class="mainmenu" href="/groups"><img id="i_icon_mini_groups" src="http://i43.servimg.com/u/f43/17/53/75/18/vgrupo10.png" border="0" hspace="0" alt="Grupos" title="Grupos" /></a></li><li><a class="mainmenu" href="/profile?mode=editprofile"><img id="i_icon_mini_profile" src="http://i43.servimg.com/u/f43/17/53/75/18/vperfi10.png" border="0" hspace="0" alt="Perfil" title="Perfil" /></a></li><li><a class="mainmenu" href="/privmsg?folder=inbox"><img id="i_icon_mini_message" src="http://i43.servimg.com/u/f43/17/53/75/18/vmensa10.png" border="0" hspace="0" alt="Mensagens privadas" title="Mensagens privadas" /></a></li><li><a class="mainmenu" href="/login?logout=1&tid=2b95acbaaed6fec41c3ec58238b02b0c&key=6a93a0" rel="nofollow" id="logout" ><img id="i_icon_mini_logout" src="http://i43.servimg.com/u/f43/17/53/75/18/vlogou10.png" border="0" hspace="0" alt="Sair [ DropLeet ]" title="Sair [ DropLeet ]" /></a></li></ul><div id="search-box"><form method="get" action="/search?search_where=11" id="search"><p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="Buscar..." onclick="if (this.value == 'Buscar...') this.value = '';" onblur="if (this.value == '') this.value = 'Buscar...';" /><input class="button2" type="submit" value="Buscar" /></p></form></div><span class="corners-bottom"><span></span></span></div></div></div><div id="page-body"><div id="emptyidcc" class="no-left"><div id="outer-wrapper"><div id="wrapper"><div id="container"><div id="content"><div id="emptyidleft"></div><div id="main"><div id="main-content"> <title>Conjuntos</title><meta http-equiv="content-script-type" content="text/javascript" /><meta http-equiv="content-style-type" content="text/css" /><link rel="shortcut icon" type="image/x-icon" href="http://i57.servimg.com/u/f57/17/53/75/18/tutori13.png" /><meta name="title" content="Reviews" /><link rel="stylesheet" href="http://www.tutorialdoca.com/81-ltr.css" type="text/css" /><link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="Tutorial do CA" /><link rel="search" type="application/opensearchdescription+xml" href="http://www.directorioforuns.com/pt/search/improvedsearch.xml" title="Pesquisar fóruns" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rs4/33/frm/lang/pt.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[ $(document).ready(function(){});//]]></script><style type="text/css">#page-footer, div.navbar, div.navbar ul.linklist {display: block !important;}ul.linklist li.rightside, ul.linklist li.rightside a.copyright {display: inline !important;}</style><script src="http://www.tutorialdoca.com/99387.js" type="text/javascript"></script><base href="http://www.tutorialdoca.com/"></head> <br /><br /> <div class="CA">Conjuntos</div><br> <div class="container"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1">Conjunto Phoenix</li> <li class="tab-link" data-tab="tab-2">Conjunto Snake</li> </ul> <div id="tab-1" class="tab-content current"> <div class="CA">Conjunto Phoenix</div><br> <br /><br /> <center><img src="http://i86.servimg.com/u/f86/17/53/75/18/setpho10.png" /></center><br><br> </div> <div id="tab-2" class="tab-content"> <div class="CA">Conjunto Snake</div><br> <br /><br /> <center><img src="http://i86.servimg.com/u/f86/17/53/75/18/setsna10.png" /></center><br><br> </div> </div> <br /><br /> <div class="TituloNoBG">© Tutorial do CA</div> <div id="emptyidright"></div><div id="page-footer"><div class="navbar"><div class="inner"><span class="corners-top"><span></span></span><ul class="linklist clearfix"><li class="footer-home"><a class="icon-home" href="" accesskey="h"></a></li></ul><span class="corners-bottom"><span></span></span></div></div><p class="copyright"></p><br><script type="text/javascript">//<![CDATA[ fa_endpage();//]]></script> </body> </html>

Resultado:

http://www.tutorialdoca.com/h41-conjuntos

Já tentei mudar o revestimento do JS de "nos tópicos" para "todas as páginas", mas não adiantou.

por Cream 19.09.16 13:37

Olá autor,

O seu problema ocorre porque nas páginas HTML o senhor precisa chamar a biblioteca jQuery para que o código funcione. Assim:

Código:: <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> SEU CÓDIGO </script>

Eu criei uma página desta maneira, e funcionou normalmente:

Código:: <style> body{ margin-top: 100px; font-family: Verdana,Arial,Helvetica,sans-serif; line-height: 1.6 } .container{ width: 800px; margin: 0 auto; } ul.tabs{ margin: 0px; padding: 0px; list-style: none; } ul.tabs li{ background: #171717; color: #FFFFFF; display: inline-block; padding: 10px 15px; cursor: pointer; } ul.tabs li.current{ background: #171717; color: #C1FA17; font-weight: bold; } .tab-content{ display: none; background: #171717; color: #FFFFFF; padding: 15px; } .tab-content.current{ display: inherit; } ul.tabs br, ul.tabs + br, ul.tabs + br + br, .tab-content + br {display:none!important} .container { width: auto!important; text-align: center; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('ul.tabs li').click(function(){ var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab_id).addClass('current'); }) }) </script> <div class="container"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1">Antes do Reboot</li> <li class="tab-link" data-tab="tab-2">Depois do Reboot</li> <li class="tab-link" data-tab="tab-3">Animações</li> <li class="tab-link" data-tab="tab-4">Reviews</li> </ul> <div id="tab-1" class="tab-content current"> Texto Aba 1 </div> <div id="tab-2" class="tab-content"> Texto Aba 2 </div> <div id="tab-3" class="tab-content"> Texto Aba 3 </div> <div id="tab-4" class="tab-content"> Texto Aba 4 </div> </div>

Espero ter ajudado.
Até mais!

por Maori 19.09.16 21:15

Olá, Zombie.

Na verdade você apenas colocou os JS no lugar errado, mas já arrumei pra você. E também você esqueceu um pequeno código.

Cá está sua página:

Código:: <style type="text/css"> /*Título para páginas HTML * by DropLeet */ .Titulo { color: #ddd; font-family: Verdana, Tahoma, sans-serif; font-variant: small-caps; font-size: 17pt; text-align: center; text-shadow: 0 2px 5px black; line-height: 250%; background-image:url('http://img835.imageshack.us/img835/5259/bgtitulo.png'); background-size: 50%, 50%; /* CSS3 */ -moz-background-size: 50%, 50%; /* Firefox 3.6 */ background-repeat: no-repeat; background-position: center; } table { font-size: 10px !important; } </style> <html> <head> <link href='http://i57.servimg.com/u/f57/17/53/75/18/tutori13.png' rel='icon' type='image/x-icon' /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <script type="text/javascript">//<![CDATA[ var url_search = '/search'; insert_search_menu_new();//]]> </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rs4/33/frm/lang/pt.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[ $(document).ready(function(){});//]]></script><style type="text/css">#page-footer, div.navbar, div.navbar ul.linklist {display: block !important;}ul.linklist li.rightside, ul.linklist li.rightside a.copyright {display: inline !important;}</style><script src="http://www.tutorialdoca.com/99387.js" type="text/javascript"></script><base href="http://www.tutorialdoca.com/"> <script> $(document).ready(function(){ $('ul.tabs li').click(function(){ var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab_id).addClass('current'); }) }) </script> <title>Conjuntos</title> </head> <body id="phpbb"> <div class="conteneur_minwidth_IE"><div class="conteneur_layout_IE"><div class="conteneur_container_IE"><div id="wrap"><a id="top" name="top" accesskey="t"></a><div id="page-header"><div class="headerbar"><div class="inner"><span class="corners-top"><span></span></span><div id="logo-desc"><a href="/forum" id="logo"><img src="http://s4.uploads.im/S8yN7.gif" alt="Tutorial do CA" /></a><div id="site-title">Tutorial do CA</div><p>O seu Database detalhado sobre o FPS Combat Arms Brasil.</p></div><span class="corners-bottom"><span></span></span></div></div><div class="navbar"><div class="inner"><span class="corners-top"><span></span></span><ul class="linklist navlinks"><li><a class="mainmenu" href="/forum"><img id="i_icon_mini_index" src="http://i43.servimg.com/u/f43/17/53/75/18/vinici10.png" border="0" hspace="0" alt="Início" title="Início" /></a></li><li><a class="mainmenu" href="/admin/index.forum? part=admin&sid=8af4651b7b395167ceef"><img src="http://i43.servimg.com/u/f43/17/53/75/18/vpcont10.png" border="0" hspace="0" alt="Painel de Controle" title="Painel de Controle" /></a></li><li><a class="mainmenu" href="/"><img id="i_icon_mini_portal" src="http://i43.servimg.com/u/f43/17/53/75/18/vporta10.png" border="0" hspace="0" alt="Portal" title="Portal" /></a></li><li><a class="mainmenu" href="/calendar"><img id="i_icon_mini_calendar" src="http://i43.servimg.com/u/f43/17/53/75/18/vcalen10.png" border="0" hspace="0" alt="Calendário" title="Calendário" /></a></li><li><a class="mainmenu" href="/faq"><img id="i_icon_mini_faq" src="http://i43.servimg.com/u/f43/17/53/75/18/vfaq10.png" border="0" hspace="0" alt="FAQ" title="FAQ" /></a></li><li><a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;"><img id="i_icon_mini_search" src="http://i43.servimg.com/u/f43/17/53/75/18/vprocu10.png" border="0" hspace="0" alt="Buscar" title="Buscar" /></a></li><li><a class="mainmenu" href="/memberlist" rel="nofollow"><img id="i_icon_mini_members" src="http://i43.servimg.com/u/f43/17/53/75/18/vmembr10.png" border="0" hspace="0" alt="Membros" title="Membros" /></a></li><li><a class="mainmenu" href="/groups"><img id="i_icon_mini_groups" src="http://i43.servimg.com/u/f43/17/53/75/18/vgrupo10.png" border="0" hspace="0" alt="Grupos" title="Grupos" /></a></li><li><a class="mainmenu" href="/profile?mode=editprofile"><img id="i_icon_mini_profile" src="http://i43.servimg.com/u/f43/17/53/75/18/vperfi10.png" border="0" hspace="0" alt="Perfil" title="Perfil" /></a></li><li><a class="mainmenu" href="/privmsg? folder=inbox"><img id="i_icon_mini_message" src="http://i43.servimg.com/u/f43/17/53/75/18/vmensa10.png" border="0" hspace="0" alt="Mensagens privadas" title="Mensagens privadas" /></a></li><li><a class="mainmenu" href="/login?logout=1&tid=2b95acbaaed6fec41c3ec58238b02b0c&key=6a93a0" rel="nofollow" id="logout" ><img id="i_icon_mini_logout" src="http://i43.servimg.com/u/f43/17/53/75/18/vlogou10.png" border="0" hspace="0" alt="Sair [ DropLeet ]" title="Sair [ DropLeet ]" /></a></li></ul><div id="search-box"><form method="get" action="/search?search_where=11" id="search"><p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="Buscar..." onclick="if (this.value == 'Buscar...') this.value = '';" onblur="if (this.value == '') this.value = 'Buscar...';" /><input class="button2" type="submit" value="Buscar" /></p></form></div><span class="corners- bottom"><span></span></span></div></div></div><div id="page-body"><div id="emptyidcc" class="no-left"><div id="outer-wrapper"><div id="wrapper"><div id="container"><div id="content"><div id="emptyidleft"></div><div id="main"><div id="main-content"> <title>Conjuntos</title><meta http-equiv="content-script-type" content="text/javascript" /><meta http-equiv="content-style-type" content="text/css" /><link rel="shortcut icon" type="image/x-icon" href="http://i57.servimg.com/u/f57/17/53/75/18/tutori13.png" /><meta name="title" content="Reviews" /><link rel="stylesheet" href="http://www.tutorialdoca.com/81-ltr.css" type="text/css" /><link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="Tutorial do CA" /><link rel="search" type="application/opensearchdescription+xml" href="http://www.directorioforuns.com/pt/search/improvedsearch.xml" title="Pesquisar fóruns" /></head> <br /><br /> <div class="CA">Conjuntos</div><br> <div class="container"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1">Conjunto Phoenix</li> <li class="tab-link" data-tab="tab-2">Conjunto Snake</li> </ul> <div id="tab-1" class="tab-content current"> <div class="CA">Conjunto Phoenix</div><br> <br /><br /> <center><img src="http://i86.servimg.com/u/f86/17/53/75/18/setpho10.png" /></center><br><br> </div> <div id="tab-2" class="tab-content"> <div class="CA">Conjunto Snake</div><br> <br /><br /> <center><img src="http://i86.servimg.com/u/f86/17/53/75/18/setsna10.png" /></center><br><br> </div> </div> <br /><br /> <div class="TituloNoBG">© Tutorial do CA</div> <div id="emptyidright"></div><div id="page-footer"><div class="navbar"><div class="inner"><span class="corners-top"><span></span></span><ul class="linklist clearfix"><li class="footer-home"><a class="icon-home" href="" accesskey="h"></a></li></ul><span class="corners-bottom"><span></span></span></div></div><p class="copyright"></p><br> </body> </html>

Até mais!

por ZombieW 19.09.16 22:37

@Cream @PaladinoS

Obrigado.

por Cream 19.09.16 22:38

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

Sistema de abas em página HTML