Sistema de abas em página HTML

3 participantes

Ir para baixo

Tópico resolvido Sistema de abas em página HTML

Mensagem 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><!-- 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
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Sistema de abas em página HTML

Mensagem 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><!-- container -->

Espero ter ajudado.
Até mais!
Cream
Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Sistema de abas em página HTML

Mensagem 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><!-- 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
Maori
Membro

Membro desde : 08/06/2014
Mensagens : 521
Pontos : 702

http://baixacidade.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Sistema de abas em página HTML

Mensagem por ZombieW 19.09.16 22:37

ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Sistema de abas em página HTML

Mensagem por Cream 19.09.16 22:38

Sistema de abas em página HTML Symbol10 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
Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos