Problema com as tabs (javascript)

Detalhes da questão

Endereço do fórum: https://arcane.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá queridos!

Estou com um problema no meu fórum e não sei como posso estar resolvendo. Gostaria de usar um javascript simples de troca de tabs mas, mesmo colocando pelo painel com investimento nos tópicos, ele não funciona na mensagem e eu não consigo pensar em qual seria o motivo, uma vez que no codepen está funcionando perfeitamente.

Adianto que a gestão do javascript já está ligada, o investimento está nos tópicos e não há nenhum outro código que possa estar causando conflitos (eu removi todos, para testar).

Agradeço de antemão a quem puder ajudar!

Link para o tópico (por favor, ignorem o nome dele, é só um fórum de testes): Aqui.

Código:

 function showTab(tabNumber) {
            // Hide all tab contents
            var contents = document.getElementsByClassName('tab-content');
            for (var i = 0; i < contents.length; i++) {
                contents[i].classList.remove('active');
            }

            // Show the selected tab content
            var selectedContent = document.getElementById(`tab-content-${tabNumber}`);
            selectedContent.classList.add('active');
        }

dando um up aqui

olá
o javascript está habilitado?
você tentou o posicionamento "em todas as páginas"?

este código é sobre guias de categoria ou tags de tópico?

Skouliki escreveu:olá
o javascript está habilitado?
você tentou o posicionamento "em todas as páginas"?

este código é sobre guias de categoria ou tags de tópico?

olá amada! sim, o javascript está habilitado e, sim, eu já tentei o posicionamento em todas as páginas. o código é pra um template dentro de uma mensagem

Olá!

O problema residia simplesmente no facto de não ter nada a "chamar" pela função.
O código que deixou no tópico é apenas o código que executa a função pretendida, no entanto em nenhuma parte do código estava lá algo que fizesse a função agir ao clicar em certos elementos.

Utilize este código, que deverá funcionar normalmente (nos meus testes deu OK):

Código:

function showTab(tabNumber) {
    // Hide all tab contents
    var contents = document.getElementsByClassName('tab-content');
    for (var i = 0; i < contents.length; i++) {
        contents[i].classList.remove('active');
    }

    // Show the selected tab content
    var selectedContent = document.getElementById(`tab-content-${tabNumber}`);
    selectedContent.classList.add('active');
}

document.querySelectorAll('.topicpps-txt li.tab').forEach((tab, index) => {
    tab.addEventListener('click', function() {
        showTab(index + 1);
    });
});

Hancki

Hancki escreveu:Olá!

O problema residia simplesmente no facto de não ter nada a "chamar" pela função.
O código que deixou no tópico é apenas o código que executa a função pretendida, no entanto em nenhuma parte do código estava lá algo que fizesse a função agir ao clicar em certos elementos.

Utilize este código, que deverá funcionar normalmente (nos meus testes deu OK):

Código:

function showTab(tabNumber) {
    // Hide all tab contents
    var contents = document.getElementsByClassName('tab-content');
    for (var i = 0; i < contents.length; i++) {
        contents[i].classList.remove('active');
    }

    // Show the selected tab content
    var selectedContent = document.getElementById(`tab-content-${tabNumber}`);
    selectedContent.classList.add('active');
}

document.querySelectorAll('.topicpps-txt li.tab').forEach((tab, index) => {
    tab.addEventListener('click', function() {
        showTab(index + 1);
    });
});

Hancki

olá, querido! pois então, eu coloquei o code que você enviou mas não mudou nada será que é possível o html/ou até o css estar atrapalhando algo?

Olá!

Podemos sempre experimentar editar o template que é responsável pela página de visualização de tópicos e inserir diretamente o código aí.
Aceda a: Painel administrativo > Visualização > Templates > Geral > "viewtopic_body".
Leia mais sobre a edição de templates: (3) [FAQ] Modificar os templates do Fórum

Adicione o código abaixo no final do código, logo após:

Código:

<script>
function showTab(tabNumber) {
    // Hide all tab contents
    var contents = document.getElementsByClassName('tab-content');
    for (var i = 0; i < contents.length; i++) {
        contents[i].classList.remove('active');
    }
 
    // Show the selected tab content
    var selectedContent = document.getElementById(`tab-content-${tabNumber}`);
    selectedContent.classList.add('active');
}
 
document.querySelectorAll('.topicpps-txt li.tab').forEach((tab, index) => {
    tab.addEventListener('click', function() {
        showTab(index + 1);
    });
});
</script>

Não se esqueça de desativar a página Javascript temporariamente para ver se funciona.

Hancki

Oi oi! Tentei fazer como foi dito, de inserir o javascript direto na página, mas não houve sucesso mesmo assim... Não consigo entender o motivo, então imagino que provavelmente o problema possa ser o código html/css. Vou estar compartilhando ele aqui, a quem interessar dar uma olhada, pra ver se alguém consegue identificar onde possa estar o erro. De qualquer maneira, fico agradecida!

Código:

<br><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cerberuswrites/cpf-font/cpf.min.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /></script><div class="topicpps"><div class="topicpps-header"><div class="topicpps-title">Lista de Photoplayer</div><hr class="pthr"><div class="topicpps-txt"><ul class="tabs">
<li class="tab" onclick="showTab(1)">ABCD</li><li class="tab" onclick="showTab(2)">EFGH</li><li class="tab" onclick="showTab(3)">IJKLM</li><li class="tab" onclick="showTab(4)">NOPQ</li><li class="tab" onclick="showTab(5)">RSTU</li><li class="tab" onclick="showTab(6)">VWXYZ</li></ul>
 
<div class="topicpps-caption"><i class="cp cp-star"></i> Administração / <i class="cp cp-star-o"></i> Reservado para <u>canon</u> </div>

<div id="tab-content-1" class="tab-content active"><div class="topicpps-t1"><p>
<i class="cp cp-star"></i> Aaron Taylor-Johnson — Shivani Krauczuk<br>
<i class="cp cp-star"></i> Adrien Brody — Valerio Genovesi<br>
<i class="cp cp-star"></i> Alice Pagani — Orianna S. Genovesi<br>
<i class="cp cp-star"></i> Anya Taylor-Joy — Mysie Betsy Ross<br>
<i class="cp cp-star"></i> Bill Skarsgård — Fergus Sallow<br>
<i class="cp cp-star"></i> Billie Eilish — Fearne Sallow<br>
<i class="cp cp-star"></i> Boyd Holbroom — Edgar Genovesi<br>
<i class="cp cp-star"></i> Dua Lipa — Spark Krauczuk<br>
</p></div></div>

<div id="tab-content-2" class="tab-content"><div class="topicpps-t1"><p>
<i class="cp cp-star"></i> Ewan Mitchell — Vilhan Sallow<br>
<i class="cp cp-star"></i> Grace Van Dien — Ludovica Genovesi<br>
<i class="cp cp-star"></i> Harry Lloyd — Fenris Sallow<br>
</p></div></div>

<div id="tab-content-3" class="tab-content"><div class="topicpps-t1"><p>
<i class="cp cp-star"></i> Jacob Elordi — Dante Krauczuk<br>
<i class="cp cp-star"></i> Jamie Campbell Bower — Asmodeus Moreau Welch<br>
<i class="cp cp-star"></i> Lorenzo Zurzolo — Lucenzo Genovesi<br>
<i class="cp cp-star"></i> Luca Hollestelle — June Casterly<br>
<i class="cp cp-star"></i> Lucas Lynggaard Tønnesen - Icarus Krauczuk<br>
<i class="cp cp-star"></i> Lucy Boynton — Dior Krauczuk<br>
<i class="cp cp-star"></i> Madison Beer — Sage Sinclair<br>
<i class="cp cp-star"></i> Margot Robbie — Devika Krauczuk<br>
</p></div></div>
 
<div id="tab-content-4" class="tab-content"><div class="topicpps-t1"><p>
<i class="cp cp-star"></i> Nikolaj Coster Waldau — Kieran Sallow<br>
</p></div></div>
 
<div id="tab-content-5" class="tab-content"><div class="topicpps-t1"><p>
<i class="cp cp-star"></i> Saoirse Ronan — Siouxsie Sallow<br>
<i class="cp cp-star"></i> Skeet Ulrich — William Sallow<br>
<i class="cp cp-star"></i> Sophie Thatcher — Eris Sinclair<br>
<i class="cp cp-star"></i> Thomas Tapy — Niccolò Genovesi<br>
<i class="cp cp-star"></i> Tom Glynn-Carney — Gerard Sallow Welch<br>
<i class="cp cp-star"></i> Tom Hughes — Fleance Sallow<br>
</p></div></div>
 
<div id="tab-content-6" class="tab-content"><div class="topicpps-t1"><p>
<i class="cp cp-star"></i> Victoria Pedretti — Claire Afton<br>
</p></div></div>
</div></div></div><div class="arcanecredits"><a href="https://arcane.forumeiros.com/" class="arcanecreditsc" title="arcanecreditsc">「arcane」</a></div>

Código:

/* Fontes */
@import url('https://fonts.googleapis.com/css2?family=Lunasima:wght@400;700&display=swap');
@font-face {
font-family: Orotund; src: url("https://dl.dropboxusercontent.com/s/ug2ml68mhllmqsu3ppg6f/orotund.ttf?rlkey=4f48yoy3jry2ktzjxp30m43bo&dl=0");}

/* Container */
.topicpps * {box-sizing:border-box;}

.topicpps {
  --mfont: "Lunasima", sans-serif;
  --mfont2: Orotund;
  --bg-topic1: #010101;
  --radius: 2px;
  --accent: #5c5d76;
  --tcolor: #7B6E3D;
  --c-color: #a3a3a3;
  width: 560px;
  border: 1px solid #353634;
  outline: 1px solid #353634;
  outline-offset: -6px;
  margin: 0 auto;
  padding: 30px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--bg-topic1);
}

.topicpps-header {
  width: 100%;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
}

.topicpps-title {
  font: 42px var(--mfont2);
  color: var(--tcolor);
  line-height: .8;
  cursor: crosshair;
}

hr.pthr {
  border: .7px solid var(--accent);    height: 0;
  width:100%;
  position: relative;
  top: -20px;
}

.topicpps-txt {
  font: 13px var(--mfont);
  letter-spacing: .5px;
  text-align: justify;
  color: var(--c-color);
  line-height: 130%;
  position: relative;
  top: -20px;
}

.topicpps i {
  color: #5C5D76;
}

.topicpps-caption {
  padding: 4px;
  border: 1px solid #303030;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  left: 5px;
  text-align: center;
}

.arcanecredits{margin: 0 auto;margin-top:3px;text-align:center;}.arcanecreditsc{font: bold 8.5px 'Consolas'; color: #969696; text-transform: uppercase; opacity: .8; text-decoration: none;}

/* "A tab" em si */
.tabs {
  width: 550px;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

/* Os botões da tab, dá pra estilizar cada um se quiser */
.tab {
 position: relative;
 left: 10px;
 margin: 5px 20px 5px 22px;
 padding: 4px;
 background-color: #0d1c12;
 cursor: crosshair;
 border-radius: var(--radius);
 transition: 500ms;
}

.tab:hover {
  background-color: #15241a;
  transition: 500ms;
}

/* Dentro do container da tab */
.tab-content {
  margin: 0 auto;
  display: none;
  outline: 1px solid #000;
  outline-offset: -2px;
  padding: 20px;
  border-radius: 0px;
  background-color: #0a0a0a;
  background-image: url(https://www.transparenttextures.com/patterns/asfalt-dark.png);
  position: relative;
  left: 5px;
}

.tab-content.active {
display: block;
}

.topicpps-t1 {
  padding: 2px;
  border-right: 2px solid #14261a;
  font-family: var(--mfont);
  font-size: 13px;
  font-weight: 500;
}

Boa tarde @astariondecalcinha.

O tópico já é antigo e acredito que não tenha sido resolvido. Mas, aplicando o código que citou em sua última mensagem, ele é funcional. Você precisa checar se o Investimento é para todas as páginas. Se a mensagem da página inicial onde está o código HTML que citou existir, ele vai exigir o uso da função showTab. Se não existir a exigência, o código não afetará o fórum.

Porém, o que deve ser analisado é o console do navegador. Se você observar algum erro de script, seja de outro arquivo de script, isso faz com que o código não funcione de fato. A ideia é testar qualquer código em uma página HTML personalizada isolada do fórum para verificar o funcionamento. Se funcionar, então há conflitos no fórum. Por exemplo, acesse PA > Módulos > HTML e JAVASCRIPT > Gestão das páginas HTML >. Clique no botão Criar no modo avançado (HTML) e insira esse código:

Código:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Página Crowley teste</title>
    <style type="text/css">
    /* Fontes */
@import url('https://fonts.googleapis.com/css2?family=Lunasima:wght@400;700&display=swap');
@font-face {
font-family: Orotund; src: url("https://dl.dropboxusercontent.com/s/ug2ml68mhllmqsu3ppg6f/orotund.ttf?rlkey=4f48yoy3jry2ktzjxp30m43bo&dl=0");}
 
/* Container */
.topicpps * {box-sizing:border-box;}
 
.topicpps {
  --mfont: "Lunasima", sans-serif;
  --mfont2: Orotund;
  --bg-topic1: #010101;
  --radius: 2px;
  --accent: #5c5d76;
  --tcolor: #7B6E3D;
  --c-color: #a3a3a3;
  width: 560px;
  border: 1px solid #353634;
  outline: 1px solid #353634;
  outline-offset: -6px;
  margin: 0 auto;
  padding: 30px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--bg-topic1);
}
 
.topicpps-header {
  width: 100%;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
}
 
.topicpps-title {
  font: 42px var(--mfont2);
  color: var(--tcolor);
  line-height: .8;
  cursor: crosshair;
}
 
hr.pthr {
  border: .7px solid var(--accent);    height: 0;
  width:100%;
  position: relative;
  top: -20px;
}
 
.topicpps-txt {
  font: 13px var(--mfont);
  letter-spacing: .5px;
  text-align: justify;
  color: var(--c-color);
  line-height: 130%;
  position: relative;
  top: -20px;
}
 
.topicpps i {
  color: #5C5D76;
}
 
.topicpps-caption {
  padding: 4px;
  border: 1px solid #303030;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  left: 5px;
  text-align: center;
}
 
.arcanecredits{margin: 0 auto;margin-top:3px;text-align:center;}.arcanecreditsc{font: bold 8.5px 'Consolas'; color: #969696; text-transform: uppercase; opacity: .8; text-decoration: none;}
 
/* "A tab" em si */
.tabs {
  width: 550px;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}
 
/* Os botões da tab, dá pra estilizar cada um se quiser */
.tab {
 position: relative;
 left: 10px;
 margin: 5px 20px 5px 22px;
 padding: 4px;
 background-color: #0d1c12;
 cursor: crosshair;
 border-radius: var(--radius);
 transition: 500ms;
}
 
.tab:hover {
  background-color: #15241a;
  transition: 500ms;
}
 
/* Dentro do container da tab */
.tab-content {
  margin: 0 auto;
  display: none;
  outline: 1px solid #000;
  outline-offset: -2px;
  padding: 20px;
  border-radius: 0px;
  background-color: #0a0a0a;
  background-image: url(https://www.transparenttextures.com/patterns/asfalt-dark.png);
  position: relative;
  left: 5px;
}
 
.tab-content.active {
display: block;
}
 
.topicpps-t1 {
  padding: 2px;
  border-right: 2px solid #14261a;
  font-family: var(--mfont);
  font-size: 13px;
  font-weight: 500;
}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      function showTab(tabNumber) {
            // Hide all tab contents
            var contents = document.getElementsByClassName('tab-content');
            for (var i = 0; i < contents.length; i++) {
                contents[i].classList.remove('active');
            }
 
            // Show the selected tab content
            var selectedContent = document.getElementById(`tab-content-${tabNumber}`);
            selectedContent.classList.add('active');
        }
    </script>
  </head>
  <body>
<link href="https://cdn.jsdelivr.net/gh/cerberuswrites/cpf-font/cpf.min.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" /><div class="topicpps">
   <div class="topicpps-header">
      <div class="topicpps-title">
         Lista de Photoplayer
      </div>
      <hr class="pthr" />
      <div class="topicpps-txt">
         <ul class="tabs">
            <li onclick="showTab(1)" class="tab">
               ABCD
            </li>
            <li onclick="showTab(2)" class="tab">
               EFGH
            </li>
            <li onclick="showTab(3)" class="tab">
               IJKLM
            </li>
            <li onclick="showTab(4)" class="tab">
               NOPQ
            </li>
            <li onclick="showTab(5)" class="tab">
               RSTU
            </li>
            <li onclick="showTab(6)" class="tab">
               VWXYZ
            </li>
         </ul>
         
         <div class="topicpps-caption">
            <em class="cp cp-star">
            </em> Administração / <em class="cp cp-star-o"></em> Reservado para <span style="text-decoration: underline;">canon</span>
         </div>
         
         <div class="tab-content active" id="tab-content-1">
            <div class="topicpps-t1">
               <p><em class="cp cp-star"></em> Aaron Taylor-Johnson — Shivani Krauczuk<br /><em class="cp cp-star"></em> Adrien Brody — Valerio Genovesi<br /><em class="cp cp-star"></em> Alice Pagani — Orianna S. Genovesi<br /><em class="cp cp-star"></em> Anya Taylor-Joy — Mysie Betsy Ross<br /><em class="cp cp-star"></em> Bill Skarsgård — Fergus Sallow<br /><em class="cp cp-star"></em> Billie Eilish — Fearne Sallow<br /><em class="cp cp-star"></em> Boyd Holbroom — Edgar Genovesi<br /><em class="cp cp-star"></em> Dua Lipa — Spark Krauczuk<br />
               </p>
            </div>
         </div>
         
         <div class="tab-content" id="tab-content-2">
            <div class="topicpps-t1">
               <p><em class="cp cp-star"></em> Ewan Mitchell — Vilhan Sallow<br /><em class="cp cp-star"></em> Grace Van Dien — Ludovica Genovesi<br /><em class="cp cp-star"></em> Harry Lloyd — Fenris Sallow<br />
               </p>
            </div>
         </div>
         
         <div class="tab-content" id="tab-content-3">
            <div class="topicpps-t1">
               <p><em class="cp cp-star"></em> Jacob Elordi — Dante Krauczuk<br /><em class="cp cp-star"></em> Jamie Campbell Bower — Asmodeus Moreau Welch<br /><em class="cp cp-star"></em> Lorenzo Zurzolo — Lucenzo Genovesi<br /><em class="cp cp-star"></em> Luca Hollestelle — June Casterly<br /><em class="cp cp-star"></em> Lucas Lynggaard Tønnesen - Icarus Krauczuk<br /><em class="cp cp-star"></em> Lucy Boynton — Dior Krauczuk<br /><em class="cp cp-star"></em> Madison Beer — Sage Sinclair<br /><em class="cp cp-star"></em> Margot Robbie — Devika Krauczuk<br />
               </p>
            </div>
         </div>
         
         <div class="tab-content" id="tab-content-4">
            <div class="topicpps-t1">
               <p><em class="cp cp-star"></em> Nikolaj Coster Waldau — Kieran Sallow<br />
               </p>
            </div>
         </div>
         
         <div class="tab-content" id="tab-content-5">
            <div class="topicpps-t1">
               <p><em class="cp cp-star"></em> Saoirse Ronan — Siouxsie Sallow<br /><em class="cp cp-star"></em> Skeet Ulrich — William Sallow<br /><em class="cp cp-star"></em> Sophie Thatcher — Eris Sinclair<br /><em class="cp cp-star"></em> Thomas Tapy — Niccolò Genovesi<br /><em class="cp cp-star"></em> Tom Glynn-Carney — Gerard Sallow Welch<br /><em class="cp cp-star"></em> Tom Hughes — Fleance Sallow<br />
               </p>
            </div>
         </div>
         
         <div class="tab-content" id="tab-content-6">
            <div class="topicpps-t1">
               <p><em class="cp cp-star"></em> Victoria Pedretti — Claire Afton<br />
               </p>
            </div>
         </div>
      </div>
   </div>
</div><div class="arcanecredits">
   <a title="arcanecreditsc" class="arcanecreditsc" href="https://arcane.forumeiros.com/">「arcane」</a>
</div>
  </body>
</html>

Salve e veja que o resultado será esse: https://shek.forumeiros.com/h2-teste-ads

Ao aplicar no fórum, funcionará normalmente desde que todos os outros scripts estejam em funcionamento. Um erro, já afeta o funcionamento dos demais. Veja este mesmo código funcionando na página inicial: https://shek.forumeiros.com/forum

Atenciosamente,
Shek