0

Ola. Estou tentando criar uma aplicação, a ideia é exatamente a que se encontra neste theme http://klbtheme.com/kryptix/ com o título de How ICOX Works.

A cor do meu ícone é cinza e o background branco. Quero que ao clicar nele, ele mude para a cor branca e background roxo. O meu ícone é tipo font, então quanto a isso ok. Mas além disso, ao clicar no ícone 1, quero que o conteúdo apareça, e quando clicar no ícone 2. quero que troque pelo conteúdo do 2. Isso é fácil usando css e aplicando/removendo classes, então até ai ok, mas o problema está no javascript.

As partes do html são:

<div class="plan-card-basic cards-flex">
  <div class="plan-card-icons">
     <div class="icon-visual" id="icon-financeiro"> 
        <i class="icofont-exchange icon-white"></i>
     </div>
     <div class="icon-visual" id="icon-mensalidade">
         <i class="icofont-money-bag icon-white"></i>
     </div>
  </div>
</div>

e

<div class="plan-card-text">
  <div class="financeiro conteudo">                            
     <h2>Financeiro</h2>
     <p>Texto para Financeiro.</p>
  </div>
  <div class="mensalidade conteudo">
     <h2>Mensalidade</h2>
     <p>Textos para Mensalidade.</p>
  </div>
</div>

Criei o código abaixo, onde consigo fazer parte do que desejo que é alterar as cores.

var TodosIcones = document.querySelectorAll('.icon-visual'); 
for (var i = 0; i < TodosIcones.length; i++) {
  TodosIcones[i].onclick = onTabClick;
} 
function onTabClick () {     
  var Icon = this;
  var Icones = Icon.parentNode.querySelectorAll('.icon-visual');
  for (var i = 0; i < Icones.length; i++) {
    if (Icon == Icones[i]) {
        Icones[i].classList.add('icone-selecionado');
    } else {
        Icones[i].classList.remove('icone-selecionado');
    }
  }
}

A classe conteudo possui display none para não aparecer, então agora nenhuma aparece. Mas quero que ao ser clicado o primeiro icone, esta classe do primeiro conteúdo desapareça, fazendo com que o conteúdo esteja visível na tela, e quando clicar no segundo, adicione a classe de novo e remova a classe do segundo.

Alguém consegue me ajudar?

2 Respostas 2

1

Olá. Você pode usar uma classe .active para indicar qual ícone e qual conteúdo estão ativos. Depois basta remover/adicionar essa classe quando houver um click.

Além disso, também pode usar a propriedade data-target para indicar qual ícone está relacionado a qual conteúdo, dessa forma, quando houver o click em um ícone, você saberá exatamente qual conteúdo deve ser mostrado. Para isso, basta atribuir o id do conteúdo ao data-target do ícone no html. Por exemplo:

<div class="icon-visual" id="icon-financeiro" data-target="#financeiro-content"> 
  <i class="icofont-exchange icon-white"></i>
</div>

E na div do conteúdo você coloca o id:

<div class="financeiro conteudo" id="financeiro-content">                            
  <h2>Financeiro</h2>
  <p>Texto para Financeiro.</p>
</div>

Pelo javascript, você consegue acessar o valor do data-target usando object.dataset.target. Dessa forma, o seu código javascript ficaria assim:

var icons = document.querySelectorAll('.icon-visual');
var contents = document.querySelectorAll('.conteudo');
for (var i = 0; i < icons.length; i++) {
  icons[i].onclick = iconClick; 
}

function iconClick() {     
  var icon = this;
  for (var i = 0; i < icons.length; i++) {
     icons[i].classList.remove('active');
  }
  for (var i = 0; i < contents.length; i++) {
     contents[i].classList.remove('active');
  }

  var idContent = icon.dataset.target;
  var content = document.getElementById(idContent);
  content.classList.add('active');
  icon.classList.add('active');
}

Fiz um exemplo para você ver, segue o link: https://jsfiddle.net/1br4hvck/43/.
Espero ter ajudado.

1
0
var TodosIcones = document.querySelectorAll('.icon-visual');
var content = document.querySelectorAll(".financeiro, .mensalidade");

    for (var i = 0; i < TodosIcones.length; i++) {
        TodosIcones[i].onclick = onTabClick;
    }

    function onTabClick() {
        var Icon = this;
        var Icones = Icon.parentNode.querySelectorAll('.icon-visual');
        for (var i = 0; i < Icones.length; i++) {
            if (Icon == Icones[i]) {
                Icones[i].classList.add('icone-selecionado');
                content[i].classList.remove('conteudo');
            } else {
                Icones[i].classList.remove('icone-selecionado');
                content[i].classList.add('conteudo');
            }
        }
    };

Armazenei os blocos de conteúdo dentro da variável content e depois dentro do for da function onTabClick removi a class conteudo do bloco referente ao ícone clicado, depois quando clicar em outro ícone ele adiciona a class conteudo novamente e remove do conteúdo do ícone clicado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .