Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
224 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 222 Visitantes :: 2 Motores de busca

Jhool, vitorsali

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Sistema de abas em página HTML

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Sistema de abas em página HTML

Mensagem por ZombieW em Seg 19 Set 2016 - 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><!-- container -->
<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.

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1236
Pontos Ativos : 4133

http://www.perfectteam.org

Resolvido Re: Sistema de abas em página HTML

Mensagem por Cream em Seg 19 Set 2016 - 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><!-- container -->

Espero ter ajudado.
Até mais!

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 13897

http://ajuda.forumeiros.com

Resolvido Re: Sistema de abas em página HTML

Mensagem por Maori em Seg 19 Set 2016 - 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><!-- container -->
<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!

Maori
Usuário destaque

Masculino
Inscrito dia : 08/06/2014
Mensagens : 521
Pontos Ativos : 1692

http://baixacidade.forumeiros.com

Resolvido Re: Sistema de abas em página HTML

Mensagem por ZombieW em Seg 19 Set 2016 - 22:37


ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1236
Pontos Ativos : 4133

http://www.perfectteam.org

Resolvido Re: Sistema de abas em página HTML

Mensagem por Cream em Seg 19 Set 2016 - 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".

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 13897

http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum