Sistema de Abas

Detalhes da questão

Endereço do fórum: www.tutorialdopw.com
Versão do fórum: Phpbb3

Descrição

Bom dia,

Como posso implementar este sistema de abas que existe no início do FdF?

Olá!

Eu penso que as imagens que estão aí sejam da propriedade Forumeiros. Ou seja, poderá usar, mas terá de substituir as imagens para evitar futuros problemas.
Aceda a Painel de Controle > Visualização > Página Inicial > Geral e na mensagem da página inicial coloque o seguinte código:

Código:

<style type="text/css">.homepageTitle { color:#39C; font-size:21px; font-style:italic; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; background:url(http://2img.net/i/fa/optimisation_fdf/fr/puce10.png) no-repeat 0 0; height:40px; padding:5px 0px 0px 25px; }
#homepageLogo { float:right; margin-left:20px; }
#hideHomepageMessage { float:right; cursor:pointer; }

/* INFO BOX */
#faInfo { color:#666; background:#FFF; border:1px solid #39C; border-bottom-width:3px; border-radius:0 3px 3px 3px; padding:6px; }
#faInfoNav { background:#FFF; border:1px solid #39C; border-bottom:none; border-radius:3px 3px 0 0; overflow:hidden; display:inline-block; }
#faInfoNav a { color:#333; background:#FFF; border-right:1px solid #39C; font-size:11px; font-weight:bold; display:inline-block; padding:6px 9px; }
#faInfoNav a:hover, #faInfoNav .infoActif { color:#FFF; background:#39C; }
#faInfoAnn { background-image:url('http://i18.servimg.com/u/f18/18/21/60/73/fdf_bu10.png') }
#faInfoSearch { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_se10.png') }
#faInfoExplain { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_ex10.png') }
#faInfoSuggestion { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_su10.png') }
#faInfoStaff { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_st10.png') }
.infoBlock { text-align:justify; background-repeat:no-repeat; background-position:0 50%; padding-left:75px; min-height:100px; }

/* INFO NEWS */
.faNewsRow { background:#F0F6F8; border-radius:3px; margin:3px 0; padding:5px 10px; }
.faNewsRow a { font-weight:bold }
.faNewsDate { font-size:11px; font-style:italic; background:url(http://2img.net/i/fa/subsilver/icon_miniposted.gif) no-repeat 0 center; padding-left:12px; float:right; }

/* PROFILE STYLE */
#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; }
#userProfile .leftCol { float:left; text-align:center; width:20%; }
#userProfile .rightCol { float:left; width:25%; }
#userName { background:#FFF; border:1px solid #DDD; color:#39C; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-20px; padding:0 12px; line-height:18px; }
#userName span { font-weight:normal }
#userAvatar img { max-width:100px }
#userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; }
#userProfile .title { color:#39C; font-weight:bold; border-bottom:1px solid #39C; padding-bottom:3px; margin-bottom:3px; width:90%; }
#userProfile .statLabel { display:inline-block; width:85px; font-weight:bold; text-align:right; margin-right:6px; }

/* SEARCH BAR */
#fa_google_search form.gsc-search-box { width:80% }
.gsc-input-box { height:auto }
.gsc-search-box-tools .gsc-search-box .gsc-input, .gsib_a, .cse .gsc-control-cse, .gsc-control-cse { padding:0 }
.gsc-control-cse, .gsc-input-box, input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { background:none; border:none; }
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { height:12px; background-color:#369FCF; border-radius:0 3px 3px 0; margin:0; margin-left:21px; padding:10px; box-shadow:none; }
#gsc-i-id1 { height:18px !important; padding:6px 12px !important; border:1px solid #369FCF !important; box-shadow:none !important; cursor:text; }
#gsc-i-id1, .gsc-input-box-focus { border-radius:3px 0 0 3px }
.gsib_b { position:relative }
.gsst_a { position:absolute; top:6px; }</style>
<div style="display:none;" class="homepageTitle" id="hiddenTitle" itemprop="name">
    Bem vindo {USERNAME} ao fórum de suporte Forum<span style="color:#333">eiros</span>  
</div>
  <a href="http://www.forumeiros.com/" itemprop="url"><img alt="" src="http://i18.servimg.com/u/f18/18/45/41/65/fdf-f11.png" id="homepageLogo" itemprop="logo" /></a>  
<div class="homepageTitle">
    Bem vindo {USERNAME} ao fórum de suporte oficial de Forum<span style="color:#333">eiros</span>  
</div>
  
<div itemprop="description" style="text-align:justify">
    Bem vindo ao suporte <span style="color:#39C">Forum</span><span style="color:#333">eiros</span>, {USERNAME}. Este fórum é baseado em apoio de voluntários, por isso é necessário para fazer uma <strong><a rel="nofollow" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">busca</a></strong> antes de abrir um novo tópico para uma pergunta ou problema. Se não foram encontrados resultados, você pode, em seguida, abrir um novo tópico explicando claramente o problema.  
</div>
   <br class="clear" />  
<div id="faInfoNav">
    <a href="#" class="infoActif" id="_faInfoAnn">Novidades e atualizações</a><a href="#" id="_faInfoSearch">Busca personalizada</a><a href="#" id="_faInfoExplain">Explique sua dúvida</a><a href="#" id="_faInfoSuggestion">Proponha sua sugestão</a><a href="#" id="_faInfoStaff" style="border:none">Equipe Forumeiros</a>  
</div>
  
<div id="faInfo">
          
 <div class="infoBlock" id="faInfoAnn">
        Quando Forumeiros envia novidades aos seus fóruns, você poderá consultá-los logo abaixo.        
 <div id="faNewsBox">
              
 <div class="faNewsRow">
    <a href="/f1-" itemprop="url">Anúncios e Atualizações</a>    
 </div>
              
 <div class="faNewsRow">
    <a href="/f4-" itemprop="url">Anúncios do fórum de suporte</a>    
 </div>
              
 <div class="faNewsRow">
    <a href="/t23-" itemprop="url">Dúvidas mais frequentes</a>    
 </div>
            
 </div>
            
 <div style="display:none" id="faNewsRSS">
      
 </div>
          
 </div>
          
 <div style="display:none;" class="infoBlock" id="faInfoSearch">
        Tópicos que não recebem uma resposta por vários dias são automaticamente enviados para a Lixeira. Ao pesquisar é possível encontrar tópicos que se relacionam com o seu problema, e que já estão resolvidos! Faça uma busca personalizada usando a função logo abaixo:        
 <div style="display:none;height:30px;padding:6px 0;" id="fa_google_search">
    <gcse:search> </gcse:search>    
 </div>
            
 <form action="/search" method="get" class="faForumSearch" style="padding:6px 0;" id="searchNoJS">
          <input type="text" value="" name="search_keywords" style="width:75%;" class="inputbox search" />      <input type="submit" value="Search" class="button2" />        
 </form>
        Por favor, lembre-se de buscar em nossa lista de <a href="/t23-" style="font-weight:bold;">perguntas frequentes</a> antes de criar uma dúvida caso não tenha encontrado o que deseja.      
 </div>
            
 <div style="display:none;" class="infoBlock" id="faInfoExplain">
        Se você explicar o problema que está enfrentando apresentando todos os detalhes, o suporte será mais rápido! Para ajudá-lo nisso, nós aconselhamos que mantenha as informações <strong><a href="/profile?mode=editprofile">técnicas do seu perfil</a> atualizadas</strong>. É através delas, que vamos entender melhor sua questão.    <br /><br />    <strong>Aconselhamos ler : </strong><a href="/t82-regras" itemprop="url">Regulamento geral</a> • <a href="/t93381-" itemprop="url">Troca de senha da fundação</a> • <a href="/t817-" itemprop="url">Saiba o que fazer ao chegar no fórum</a> • <a href="/t21693-" itemprop="url">Sua segurança em Forumeiros</a>      
 </div>
            
 <div style="display:none;" class="infoBlock" id="faInfoSuggestion">
        Se você tem novas ideias, não hesite em nos sugerir! Forumeiros é uma empresa aberta para receber seus feedbacks, pois, é dessa forma que construímos uma grande família facilitando o seu conforto, e de seus membros.     <br /><br />    Compartilhe a sua sugestão conosco, criando um novo tópico em <a href="/c6-" style="font-weight:bold;" itemprop="url">Sugestões e Melhoras</a>!      
 </div>
            
 <div style="display:none;" class="infoBlock" id="faInfoStaff">
        A equipe deste fórum não lhe fornece qualquer apoio por MP. Para que suas dúvidas sejam sanadas, por favor, crie um novo tópico no setor de suporte. Se o seu problema requer que você entre em contato com um membro do administrativo, você pode ver a composição da equipe neste tópico: <a href="/t7556-" itemprop="url">A equipe de suporte Forumeiros</a>    <br /><br />    Por favor <strong>não contactar vários membros da equipe de uma só vez</strong> para um mesmo assunto.      
 </div>
      
</div><script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('main-content'), // main container
  
      // news nodes and data
      news = document.getElementById('faNewsBox'),
      newsTopics = news.getElementsByTagName('DIV'),
      storage = window.localStorage,
      rss = document.getElementById('faNewsRSS'),
      
      homepage = J('.introduction', main)[0], // homepage message
      
      // google search
      cx = '018097555942133585918:_gwf276jof8',
      gcse = document.createElement('script'),
      s = document.getElementsByTagName('script')[0],
      
      // info box
      infoLinks = document.getElementById('faInfoNav').getElementsByTagName('A'),
      
      // hide button
      hide = document.getElementById('hideHomepageMessage'),
      
      // profile variables
      profil,
      login;
      
  document.getElementById('fa_google_search').style.display = 'block'; // show google search for JS user
  document.getElementById('searchNoJS').style.display = 'none'; // hide normal search for JS users
      
  // hide homepage
  if (my_getcookie('faHomepage') == 'hidden') {
    hide.src = 'http://2img.net/i/fa/m/tabs_more1.gif';
    document.getElementById('homepageMessage').style.display = 'none';
    document.getElementById('hiddenTitle').style.display = 'block';
  }
      
  // get news topics
  if (storage && storage.faNewsTopics && storage.faNewsTopicsExp > +new Date - 1*60*60*1000) news.innerHTML = storage.faNewsTopics;
  else {
    J(rss).load('/feed/?f=1 item', function() {
      for (var i = 0, item = rss.childNodes, j = newsTopics.length, t; i < j; i++) {
        t = J('title', item[i])[0].innerHTML;
        newsTopics[i].innerHTML = '<a itemprop="url" href="' + J('guid', item[i])[0].innerHTML + '" title="' + t + '">' + ( t.length > 69 ? t.slice(0, 69) + '...' : t ) + '</a> <span class="faNewsDate">' + J('pubDate', item[i])[0].innerHTML.replace(/.*?, (\d+ \w+).*/, function (M, S1) { return S1.charAt(0) == '0' ? S1.slice(1) : S1 }) + '</span>';
      }
      if (storage) {
        storage.faNewsTopics = news.innerHTML;
        storage.faNewsTopicsExp = +new Date;
      }
    });
  }
  
  // create google search bar
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
  s.parentNode.insertBefore(gcse, s);
  
  // apply general logic to info box tabs
  for (var i = 0, j = infoLinks.length; i < j; i++) {
    infoLinks[i].onclick = function() {
      var a = document.getElementById('faInfoNav').getElementsByTagName('A'), b = document.getElementById('faInfo').getElementsByTagName('DIV'), i, j;
      
      for (i = 0, j = b.length; i < j; i++) if (/infoBlock/.test(b[i].className)) b[i].style.display = 'none';
      document.getElementById(this.id.slice(1)).style.display = 'block';
      
      for (i = 0, j = a.length; i < j; i++) if (/infoActif/.test(a[i].className)) a[i].className = '';
      this.className = 'infoActif';
      
      return false;
    }
  }
  
  // hide the homepage message
  hide.onclick = function() {
    var message = document.getElementById('homepageMessage'),
        title = document.getElementById('hiddenTitle');
  
    if (this.src == 'http://2img.net/i/fa/m/tabs_less1.gif') {
      this.src = 'http://2img.net/i/fa/m/tabs_more1.gif';
      message.style.display = 'none';
      title.style.display = 'block';
      my_setcookie('faHomepage', 'hidden');
    } else {
      this.src = 'http://2img.net/i/fa/m/tabs_less1.gif';
      message.style.display = 'block';
      title.style.display = 'none';
      my_setcookie('faHomepage', 'shown');
    }
  };
})(jQuery, _userdata, _lang);
//]]></script>

Atenciosamente.
Fraise

A intenção não é copiar, mas sim aproveitar esse sistema de abas.

Vou inserir ela em tópicos com as informações de forma otimizada.

O código que você me passou, serve para o índice, creio eu.

Poderá também seguir este tutorial:
https://ajuda.forumeiros.com/t76837-

Para que não fique igual.
Algo mais em relação a isto ou está resolvido?

Até mais.
Fraise

Ainda não.

Vi o tutorial que você me passou, ele serve para:

seender escreveu:2º - Aplicação do código:
O código poderá ser aplicado em vários locais, para mais informações leia o tutorial referente ao local de possível adição:
Widgets do portal;
Widgets do fórum;
Mensagem na home page;
Página HTML.

Eu preciso inserir isso em tópicos, é possível?

Se sim, como eu chamarei o código de abas de dentro do tópico?

Sim, é possível. Pórem, você precisa de ter o HTML ativo nos tópicos. (Painel de Controle > Geral > Mensagens e e-mails > Configuração Permitir HTML: Sim.)

Até mais.
Fraise

ZombieW escreveu:Se sim, como eu chamarei o código de abas de dentro do tópico?

Faltou você me responder isso!

Desculpe.
Basta colocar exatamente o código como eu lhe forneci.

Código:

<style type="text/css">.homepageTitle { color:#39C; font-size:21px; font-style:italic; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; background:url(http://2img.net/i/fa/optimisation_fdf/fr/puce10.png) no-repeat 0 0; height:40px; padding:5px 0px 0px 25px; }
#homepageLogo { float:right; margin-left:20px; }
#hideHomepageMessage { float:right; cursor:pointer; }

/* INFO BOX */
#faInfo { color:#666; background:#FFF; border:1px solid #39C; border-bottom-width:3px; border-radius:0 3px 3px 3px; padding:6px; }
#faInfoNav { background:#FFF; border:1px solid #39C; border-bottom:none; border-radius:3px 3px 0 0; overflow:hidden; display:inline-block; }
#faInfoNav a { color:#333; background:#FFF; border-right:1px solid #39C; font-size:11px; font-weight:bold; display:inline-block; padding:6px 9px; }
#faInfoNav a:hover, #faInfoNav .infoActif { color:#FFF; background:#39C; }
#faInfoAnn { background-image:url('http://i18.servimg.com/u/f18/18/21/60/73/fdf_bu10.png') }
#faInfoSearch { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_se10.png') }
#faInfoExplain { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_ex10.png') }
#faInfoSuggestion { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_su10.png') }
#faInfoStaff { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_st10.png') }
.infoBlock { text-align:justify; background-repeat:no-repeat; background-position:0 50%; padding-left:75px; min-height:100px; }

/* INFO NEWS */
.faNewsRow { background:#F0F6F8; border-radius:3px; margin:3px 0; padding:5px 10px; }
.faNewsRow a { font-weight:bold }
.faNewsDate { font-size:11px; font-style:italic; background:url(http://2img.net/i/fa/subsilver/icon_miniposted.gif) no-repeat 0 center; padding-left:12px; float:right; }

/* PROFILE STYLE */
#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; }
#userProfile .leftCol { float:left; text-align:center; width:20%; }
#userProfile .rightCol { float:left; width:25%; }
#userName { background:#FFF; border:1px solid #DDD; color:#39C; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-20px; padding:0 12px; line-height:18px; }
#userName span { font-weight:normal }
#userAvatar img { max-width:100px }
#userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; }
#userProfile .title { color:#39C; font-weight:bold; border-bottom:1px solid #39C; padding-bottom:3px; margin-bottom:3px; width:90%; }
#userProfile .statLabel { display:inline-block; width:85px; font-weight:bold; text-align:right; margin-right:6px; }

/* SEARCH BAR */
#fa_google_search form.gsc-search-box { width:80% }
.gsc-input-box { height:auto }
.gsc-search-box-tools .gsc-search-box .gsc-input, .gsib_a, .cse .gsc-control-cse, .gsc-control-cse { padding:0 }
.gsc-control-cse, .gsc-input-box, input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { background:none; border:none; }
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { height:12px; background-color:#369FCF; border-radius:0 3px 3px 0; margin:0; margin-left:21px; padding:10px; box-shadow:none; }
#gsc-i-id1 { height:18px !important; padding:6px 12px !important; border:1px solid #369FCF !important; box-shadow:none !important; cursor:text; }
#gsc-i-id1, .gsc-input-box-focus { border-radius:3px 0 0 3px }
.gsib_b { position:relative }
.gsst_a { position:absolute; top:6px; }</style>
<div style="display:none;" class="homepageTitle" id="hiddenTitle" itemprop="name">
    Bem vindo {USERNAME} ao fórum de suporte Forum<span style="color:#333">eiros</span> 
</div>
  <a href="http://www.forumeiros.com/" itemprop="url"><img alt="" src="http://i18.servimg.com/u/f18/18/45/41/65/fdf-f11.png" id="homepageLogo" itemprop="logo" /></a> 
<div class="homepageTitle">
    Bem vindo {USERNAME} ao fórum de suporte oficial de Forum<span style="color:#333">eiros</span> 
</div>
 
<div itemprop="description" style="text-align:justify">
    Bem vindo ao suporte <span style="color:#39C">Forum</span><span style="color:#333">eiros</span>, {USERNAME}. Este fórum é baseado em apoio de voluntários, por isso é necessário para fazer uma <strong><a rel="nofollow" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">busca</a></strong> antes de abrir um novo tópico para uma pergunta ou problema. Se não foram encontrados resultados, você pode, em seguida, abrir um novo tópico explicando claramente o problema. 
</div>
  <br class="clear" /> 
<div id="faInfoNav">
    <a href="#" class="infoActif" id="_faInfoAnn">Novidades e atualizações</a><a href="#" id="_faInfoSearch">Busca personalizada</a><a href="#" id="_faInfoExplain">Explique sua dúvida</a><a href="#" id="_faInfoSuggestion">Proponha sua sugestão</a><a href="#" id="_faInfoStaff" style="border:none">Equipe Forumeiros</a> 
</div>
 
<div id="faInfo">
         
 <div class="infoBlock" id="faInfoAnn">
        Quando Forumeiros envia novidades aos seus fóruns, você poderá consultá-los logo abaixo.       
 <div id="faNewsBox">
             
 <div class="faNewsRow">
    <a href="/f1-" itemprop="url">Anúncios e Atualizações</a>   
 </div>
             
 <div class="faNewsRow">
    <a href="/f4-" itemprop="url">Anúncios do fórum de suporte</a>   
 </div>
             
 <div class="faNewsRow">
    <a href="/t23-" itemprop="url">Dúvidas mais frequentes</a>   
 </div>
           
 </div>
           
 <div style="display:none" id="faNewsRSS">
     
 </div>
         
 </div>
         
 <div style="display:none;" class="infoBlock" id="faInfoSearch">
        Tópicos que não recebem uma resposta por vários dias são automaticamente enviados para a Lixeira. Ao pesquisar é possível encontrar tópicos que se relacionam com o seu problema, e que já estão resolvidos! Faça uma busca personalizada usando a função logo abaixo:       
 <div style="display:none;height:30px;padding:6px 0;" id="fa_google_search">
    <gcse:search> </gcse:search>   
 </div>
           
 <form action="/search" method="get" class="faForumSearch" style="padding:6px 0;" id="searchNoJS">
          <input type="text" value="" name="search_keywords" style="width:75%;" class="inputbox search" />      <input type="submit" value="Search" class="button2" />       
 </form>
        Por favor, lembre-se de buscar em nossa lista de <a href="/t23-" style="font-weight:bold;">perguntas frequentes</a> antes de criar uma dúvida caso não tenha encontrado o que deseja.     
 </div>
           
 <div style="display:none;" class="infoBlock" id="faInfoExplain">
        Se você explicar o problema que está enfrentando apresentando todos os detalhes, o suporte será mais rápido! Para ajudá-lo nisso, nós aconselhamos que mantenha as informações <strong><a href="/profile?mode=editprofile">técnicas do seu perfil</a> atualizadas</strong>. É através delas, que vamos entender melhor sua questão.    <br /><br />    <strong>Aconselhamos ler : </strong><a href="/t82-regras" itemprop="url">Regulamento geral</a> • <a href="/t93381-" itemprop="url">Troca de senha da fundação</a> • <a href="/t817-" itemprop="url">Saiba o que fazer ao chegar no fórum</a> • <a href="/t21693-" itemprop="url">Sua segurança em Forumeiros</a>     
 </div>
           
 <div style="display:none;" class="infoBlock" id="faInfoSuggestion">
        Se você tem novas ideias, não hesite em nos sugerir! Forumeiros é uma empresa aberta para receber seus feedbacks, pois, é dessa forma que construímos uma grande família facilitando o seu conforto, e de seus membros.    <br /><br />    Compartilhe a sua sugestão conosco, criando um novo tópico em <a href="/c6-" style="font-weight:bold;" itemprop="url">Sugestões e Melhoras</a>!     
 </div>
           
 <div style="display:none;" class="infoBlock" id="faInfoStaff">
        A equipe deste fórum não lhe fornece qualquer apoio por MP. Para que suas dúvidas sejam sanadas, por favor, crie um novo tópico no setor de suporte. Se o seu problema requer que você entre em contato com um membro do administrativo, você pode ver a composição da equipe neste tópico: <a href="/t7556-" itemprop="url">A equipe de suporte Forumeiros</a>    <br /><br />    Por favor <strong>não contactar vários membros da equipe de uma só vez</strong> para um mesmo assunto.     
 </div>
     
</div><script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('main-content'), // main container
 
      // news nodes and data
      news = document.getElementById('faNewsBox'),
      newsTopics = news.getElementsByTagName('DIV'),
      storage = window.localStorage,
      rss = document.getElementById('faNewsRSS'),
     
      homepage = J('.introduction', main)[0], // homepage message
     
      // google search
      cx = '018097555942133585918:_gwf276jof8',
      gcse = document.createElement('script'),
      s = document.getElementsByTagName('script')[0],
     
      // info box
      infoLinks = document.getElementById('faInfoNav').getElementsByTagName('A'),
     
      // hide button
      hide = document.getElementById('hideHomepageMessage'),
     
      // profile variables
      profil,
      login;
     
  document.getElementById('fa_google_search').style.display = 'block'; // show google search for JS user
  document.getElementById('searchNoJS').style.display = 'none'; // hide normal search for JS users
     
  // hide homepage
  if (my_getcookie('faHomepage') == 'hidden') {
    hide.src = 'http://2img.net/i/fa/m/tabs_more1.gif';
    document.getElementById('homepageMessage').style.display = 'none';
    document.getElementById('hiddenTitle').style.display = 'block';
  }
     
  // get news topics
  if (storage && storage.faNewsTopics && storage.faNewsTopicsExp > +new Date - 1*60*60*1000) news.innerHTML = storage.faNewsTopics;
  else {
    J(rss).load('/feed/?f=1 item', function() {
      for (var i = 0, item = rss.childNodes, j = newsTopics.length, t; i < j; i++) {
        t = J('title', item[i])[0].innerHTML;
        newsTopics[i].innerHTML = '<a itemprop="url" href="' + J('guid', item[i])[0].innerHTML + '" title="' + t + '">' + ( t.length > 69 ? t.slice(0, 69) + '...' : t ) + '</a> <span class="faNewsDate">' + J('pubDate', item[i])[0].innerHTML.replace(/.*?, (\d+ \w+).*/, function (M, S1) { return S1.charAt(0) == '0' ? S1.slice(1) : S1 }) + '</span>';
      }
      if (storage) {
        storage.faNewsTopics = news.innerHTML;
        storage.faNewsTopicsExp = +new Date;
      }
    });
  }
 
  // create google search bar
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
  s.parentNode.insertBefore(gcse, s);
 
  // apply general logic to info box tabs
  for (var i = 0, j = infoLinks.length; i < j; i++) {
    infoLinks[i].onclick = function() {
      var a = document.getElementById('faInfoNav').getElementsByTagName('A'), b = document.getElementById('faInfo').getElementsByTagName('DIV'), i, j;
     
      for (i = 0, j = b.length; i < j; i++) if (/infoBlock/.test(b[i].className)) b[i].style.display = 'none';
      document.getElementById(this.id.slice(1)).style.display = 'block';
     
      for (i = 0, j = a.length; i < j; i++) if (/infoActif/.test(a[i].className)) a[i].className = '';
      this.className = 'infoActif';
     
      return false;
    }
  }
 
  // hide the homepage message
  hide.onclick = function() {
    var message = document.getElementById('homepageMessage'),
        title = document.getElementById('hiddenTitle');
 
    if (this.src == 'http://2img.net/i/fa/m/tabs_less1.gif') {
      this.src = 'http://2img.net/i/fa/m/tabs_more1.gif';
      message.style.display = 'none';
      title.style.display = 'block';
      my_setcookie('faHomepage', 'hidden');
    } else {
      this.src = 'http://2img.net/i/fa/m/tabs_less1.gif';
      message.style.display = 'block';
      title.style.display = 'none';
      my_setcookie('faHomepage', 'shown');
    }
  };
})(jQuery, _userdata, _lang);
//]]></script>

Até mais.
Fraise

ZombieW escreveu:A intenção não é copiar, mas sim aproveitar esse sistema de abas.

Vou inserir ela em tópicos com as informações de forma otimizada.

O código que você me passou, serve para o índice, creio eu.

Esse é o problema. Fizemos este recurso com base neste tutorial: https://ajuda.forumeiros.com/t76837- , sendo assim, não há motivos de usar o mesmo código do que temos aqui, basta personalizar o do tutorial e terá o mesmo efeito.

@Fraise

É que eu ainda acho muito confuso...

Você poderia (se possível) mastigar um pouco mais?

Qual trecho vai no CSS?

Poderia fornecer um código de exemplo aqui com algumas abas e uma frase, só para eu entender?

Olá.

Tudo que está dentro do <style></style> é CSS.

Shek escreveu:Olá.

Tudo que está dentro do <style></style> é CSS.

Certo, mas preciso deixar as tags de "Style" dentro do CSS? Normalmente não uso isso lá...

Senhor, não precisa colocar nada na folha de estilos!
Poderá fazer simplesmente assim quando quiser apresentar isso numa mensagem:

Código:

<style>div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}</style>
<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">   <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script><div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise

Certo, vamos por partes:

Inserido isso no meu CSS:

Código:

<style>div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}</style>

Depois dentro de um tópico, eu coloquei esse código:

Código:

<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">   <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script><div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

O resultado foi esse:

Vamos fazer de uma forma diferente, okay?
Adicione este código à sua folha de estilos:

Código:

div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}

Em seguida, crie um novo JS com investimento em todas as páginas:

Código:

jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">  <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})

Depois é só usar este código nas mensagens:

Código:

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise

Seguido o passo-a-passo e o resultado foi esse:



Além de bugar meu perfil à esquerda (está muito para baixo).

Impossivel! O senhor usou apenas este código, certo?

Código:

<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise

@Fraise

Sim amigo,

JavaScript:



Tópico:

Não é esse o código e sim este:

Código:

<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>


Atenciosamente.

Eu sei @Fraise , você passou errado antes, mas testei também com esse outro correto e o resultado ainda é o mesmo.

http://www.tutorialdopw.com/t1165-#3527

Bom dia.

Mas... Se você vai usar o script somente para os tópicos, então por o marcou para todas as páginas? Assim que fiz isso, você gerou um erro "Uncaught SyntaxError: Unexpected identifier" em todos os seus javascripts.

@Shek

Alterei para "nos Tópicos", mas o resultado ainda é o mesmo.

Eu não posso fazer qualquer teste, pois, o fórum não permite novas inscrições, e a conta ShiftActif foi deletada.

Shek escreveu:Eu não posso fazer qualquer teste, pois, o fórum não permite novas inscrições, e a conta ShiftActif foi deletada.

Você se refere ao meu fórum?

Exatamente.

Shek escreveu:Exatamente.

Impossível.

Nenhum usuário é deletado (pode ser banido/bloqueado) e seu usuário nunca foi registrado.

E também, meu fórum está aceitando inscrições desde sempre.

Apesar que, eu teste e não está de fato, porém, o fórum está configurado sim para aceitar:

ZombieW escreveu:

Shek escreveu:Exatamente.

Impossível.

Nenhum usuário é deletado (pode ser banido/bloqueado) e seu usuário nunca foi registrado.

E também, meu fórum está aceitando inscrições desde sempre.

Apesar que, eu teste e não está de fato, porém, o fórum está configurado sim para aceitar:

Simples de resolver. Basta aceder a Painel de Controle > Geral > Fórum > Configuração e em "Fórum de férias" marcar a opção Não.

Fraise escreveu:Simples de resolver. Basta aceder a Painel de Controle > Geral > Fórum > Configuração e em "Fórum de férias" marcar a opção Não.

Não me recordo de tê-lo colocado em "Férias", mas enfim, removi a opção.

Tente novamente Shek.

"up"

"up"

Certo, vamos recomeçar...

Removi todo meu CSS, exceto por:

Código:

/* Sistema de Abas - Início */
div.aba {
  background:#000;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}
/* Sistema de Abas - Fim */

Este é o JS:

Código:

jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">  <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})

E este é o que está no tópico:

Código:

<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

O resultado é esse:

Olá!

Mas... Para tópicos não funciona. Só funciona nos setores de aceitam o HTML, como mensagem da página inicia, páginas HTML, Widgets e etc.

Certo Shek,

Sendo assim, há como criar um sistema parecido?

Só para você entender, eu preciso melhorar a forma de como o usuário olha que está nessa postagem.

Olá!

É como o seender mencionou aqui: https://ajuda.forumeiros.com/t78753-sistema-de-abas É complicado, pois, se usar DIVs dentro dos posts, é provável que ocorra bugs. Se houvesse BBcode (nativo) do tipo DIV, talvez desse certo.

Até mais!

Ok Shek,

Você disse que em páginas HTML funciona, correto? Podemos fazer um teste então?

Mantenho o CSS, mantenho o JS, mas como insiro o sistema numa página HTML?

Utilizando o mesmo código que estava a utilizar nas mensagens.

Código:

<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise

Estranhamente continua não funcionando...

http://www.tutorialdopw.com/h10-sistema-de-abas

Código:

<div id="seender_abas"><div id="aba1" class="aba">Conteúdo da aba 1.</div><div id="aba2" class="aba">Conteúdo da aba 2.</div>
</div>

Bora lá galerinha, não deve ser tão difícil assim! =/

"up"

Mas... Como vai funcionar se você colocou apenas o HTML?? Além do mais, não é difícil, o que eu não entendo é o motivo pelo qual o senhor não tentou usar o que é ensinado no tutorial, ao invés de só colocar o HTML.

Porque o CSS e o JS já estão ativos no fórum.

Que tal tentarmos um outro código?
jQuery:

Código:

$(document).ready(function() {
   
    $(".menu[data-tab]").click(function() {
       
        // reseta as propriedades das outras abas     
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
       
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
   
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
}

CSS:

Código:

#tabelafraise {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
}

HTML:

Código:

<table id="tabelafraise" width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
  <tr>
      <td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
    <td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td>
    <td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
    <td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
  </tr>
</table>
      <div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
         <table align="left" border="0" width="2%">
            <tr>
               <td>
          USUA
               </td>
            </tr>
         </table>
      </div>

      <div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
               <td>
                      EMPR
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
               <td>
                     NOTA
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
               <td>
                      SOFT
                  </td>
                </tr>
            </table>
        </div>       

Resulta?

Até mais.
Fraise

Para evitar erros ou conflitos, ao invés de fazer no "Tutorial do PW", eu fiz no "Tutorial do CA".

Sendo assim, esse foi o resultado:

http://www.tutorialdoca.com/h38-sistema-de-abas

Boa tarde!

Vamos testar em uma página HTML, ok? Peguei um script aleatório dos que o Fraise postou, modifiquei e veja:
(Coloque-o completamente na página HTML)

Código:

<html><head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head>
<script>$(document).ready(function() {
   
    $(".menu[data-tab]").click(function() {
       
        // reseta as propriedades das outras abas     
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
       
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
   
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
  }</script>
<style>#tabelafraise {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
  }</style>

<table id="tabelafraise" width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
  <tr>
      <td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
    <td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td>
    <td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
    <td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
  </tr>
</table>
      <div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
        <table align="left" border="0" width="2%">
            <tr>
              <td>
          USUA
              </td>
            </tr>
        </table>
      </div>

      <div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
              <td>
                      EMPR
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
              <td>
                    NOTA
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
              <td>
                      SOFT
                  </td>
                </tr>
            </table>
  </div>    </html>

Mas, você deseja para os tópicos, certo?

@MateusAnjosV

Opa, esse funcionou para a página HTML!

http://www.tutorialdoca.com/h38-sistema-de-abas

Sim, desejo para os tópicos (se for possível)

Bom dia!

Nesse caso, aplique o CSS:

Código:

#tabelafraise {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
}

Crie um javascript, nos tópicos:

Código:

$(document).ready(function() {
   
    $(".menu[data-tab]").click(function() {
       
        // reseta as propriedades das outras abas     
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
       
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
   
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
}

E quando for postar, utilize:

Código:

<table id="tabelafraise" width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
 <tr>
     <td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
   <td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td>
   <td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
   <td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
 </tr>
</table>
     <div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
        <table align="left" border="0" width="2%">
           <tr>
              <td>
         USUA
              </td>
           </tr>
        </table>
     </div>

     <div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
           <table border="0" width="" align="left"valign="top">
               <tr>
              <td>
                     EMPR
                 </td>
               </tr>
           </table>
       </div>
       
     <div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
           <table border="0" width="" align="left"valign="top">
               <tr>
              <td>
                    NOTA
                 </td>
               </tr>
           </table>
       </div>
       
     <div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
           <table border="0" width="" align="left"valign="top">
               <tr>
              <td>
                     SOFT
                 </td>
               </tr>
           </table>
       </div>

Certo, tudo instalado.

http://www.tutorialdoca.com/t1746-teste-sistema-de-abas#2042

Fiz apenas uma modificação na tabela para ficar menor e quebrar em 2 linhas:

Código:

<table id="tabelafraise" width="450" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
<tr><td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
<td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td></tr>
<tr><td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
<td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
</tr>
</table>
<div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
<table align="left" border="0" width="2%">
<tr>
<td>USUA</td>
</tr>
</table></div>
<div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>EMPR</td>
</tr>
</table></div>
<div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>NOTA</td>
</tr>
</table></div>     
<div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>SOFT</td>
</tr>
</table></div>

Mas como você pode ver o texto ao clicar nos "botões" não funciona.

Sei que fui avisado que bugs podiam ocorrer.

Relaxe, não vai "rolar" bugs, ok?
Ele funciona sim, veja:
http://prntscr.com/8zonsh

---

Acrescente em seu CSS, assim, modificamos a cor do texto:

Código:

.conteudo {color: gray !important}

@MateusAnjosV

Funcionou, obrigado.

Porém, eu vi que cada botão trás o texto em uma linha.

É possível sempre trazer na mesma linha?

Pergunto porque minha ideia é criar de fato uma tabela bem grande com diversas armas. E o usuário escolher uma das versões das armas nesse sistema de abas.

Só que se uma arma sair numa posição e outra mais abaixo, vai dar no mesmo de não ter o sistema de abas! :S

Entendo... adicione mais este CSS:

Código:

#div_usua {margin-top: -10px} /* suba o 10 para subir o primeiro */
#div_empr {position: relative;top: -28px} /* suba o 28 para subir o segundo, etc */
#div_nota { position: relative;top: -48px !important}
#div_soft { position: relative;top: -68px !important}

Eu não estou conseguindo clicar... então não testei, fui na cabeça mesmo...

MateusAnjosV escreveu:Entendo... adicione mais este CSS:

Código:

#div_usua {margin-top: -10px} /* suba o 10 para subir o primeiro */
#div_empr {position: relative;top: -28px} /* suba o 28 para subir o segundo, etc */
#div_nota { position: relative;top: -48px !important}
#div_soft { position: relative;top: -68px !important}

Eu não estou conseguindo clicar... então não testei, fui na cabeça mesmo...

É, ele bugou após clicar em qualquer uma das abas.