100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
|
|
// Função para criar os blocos com base nos dados fornecidos
|
|
function criarBlocos(dados) {
|
|
// Limpar o container de blocos
|
|
entrada_1.innerHTML = '';
|
|
|
|
// Iterar sobre o array de dados dos blocos
|
|
dados.forEach(dadosDoBloco => {
|
|
|
|
const Painel = document.createElement('main');
|
|
Painel.classList.add('Corpo');
|
|
const Capitulo_1 = document.createElement('section');
|
|
Capitulo_1.classList.add('Capitulos_1');
|
|
const Capitulo_2 = document.createElement('section');
|
|
Capitulo_2.classList.add('Capitulos_2')
|
|
// Adicionar o painel ao bloco
|
|
|
|
const sub_tela_1 = document.createElement('a');
|
|
sub_tela_1.href = dadosDoBloco.Botao_1_A;
|
|
sub_tela_1.target = 'iframe';
|
|
Capitulo_1.appendChild(sub_tela_1);
|
|
const chama_tela_1 = document.createElement('div');
|
|
chama_tela_1.classList.add('reação');
|
|
sub_tela_1.appendChild(chama_tela_1);
|
|
const conteudo_tela_1 = document.createElement('p');
|
|
conteudo_tela_1.textContent = dadosDoBloco.Botao_1_P;
|
|
chama_tela_1.appendChild(conteudo_tela_1);
|
|
|
|
const sub_tela_2 = document.createElement('a');
|
|
sub_tela_2.href = dadosDoBloco.Botao_2_A;
|
|
sub_tela_2.target = 'iframe';
|
|
Capitulo_1.appendChild(sub_tela_2);
|
|
const chama_tela_2 = document.createElement('div');
|
|
chama_tela_2.classList.add('reação');
|
|
sub_tela_2.appendChild(chama_tela_2);
|
|
const conteudo_tela_2 = document.createElement('p');
|
|
conteudo_tela_2.textContent = dadosDoBloco.Botao_2_P;
|
|
chama_tela_2.appendChild(conteudo_tela_2);
|
|
|
|
const sub_tela_3 = document.createElement('a');
|
|
sub_tela_3.href = dadosDoBloco.Botao_3_A;
|
|
sub_tela_3.target = 'iframe';
|
|
Capitulo_1.appendChild(sub_tela_3);
|
|
const chama_tela_3 = document.createElement('div');
|
|
chama_tela_3.classList.add('reação');
|
|
sub_tela_3.appendChild(chama_tela_3);
|
|
const conteudo_tela_3 = document.createElement('p');
|
|
conteudo_tela_3.textContent = dadosDoBloco.Botao_3_P;
|
|
chama_tela_3.appendChild(conteudo_tela_3);
|
|
|
|
const sub_tela_4 = document.createElement('a');
|
|
sub_tela_4.href = dadosDoBloco.Botao_4_A;
|
|
sub_tela_4.target = 'iframe';
|
|
Capitulo_1.appendChild(sub_tela_4);
|
|
const chama_tela_4 = document.createElement('div');
|
|
chama_tela_4.classList.add('reação');
|
|
sub_tela_4.appendChild(chama_tela_4);
|
|
const conteudo_tela_4 = document.createElement('p');
|
|
conteudo_tela_4.textContent = dadosDoBloco.Botao_4_P;
|
|
chama_tela_4.appendChild(conteudo_tela_4);
|
|
|
|
const sub_tela_5 = document.createElement('a');
|
|
sub_tela_5.href = dadosDoBloco.Botao_5_A;
|
|
sub_tela_5.target = 'iframe';
|
|
Capitulo_1.appendChild(sub_tela_5);
|
|
const chama_tela_5 = document.createElement('div');
|
|
chama_tela_5.classList.add('reação');
|
|
sub_tela_5.appendChild(chama_tela_5);
|
|
const conteudo_tela_5 = document.createElement('p');
|
|
conteudo_tela_5.textContent = dadosDoBloco.Botao_5_P;
|
|
chama_tela_5.appendChild(conteudo_tela_5);
|
|
|
|
|
|
const Tela = document.createElement('iframe');
|
|
Tela.src = dadosDoBloco.Tela;
|
|
Tela.name = 'iframe';
|
|
Capitulo_2.appendChild(Tela);
|
|
|
|
Painel.appendChild(Capitulo_1);
|
|
Painel.appendChild(Capitulo_2);
|
|
|
|
// Adicionar o bloco ao container de blocos
|
|
entrada_1.appendChild(Painel);
|
|
});
|
|
}
|
|
|
|
criarBlocos(dadosDoBloco);
|
|
|
|
var temas = document.querySelectorAll('.reação')
|
|
|
|
function selectLink() {
|
|
temas.forEach((item) =>
|
|
item.classList.remove('ativo')
|
|
)
|
|
this.classList.add('ativo')
|
|
}
|
|
temas.forEach((item) =>
|
|
item.addEventListener('click', selectLink))
|
|
|