HTML link + label, da bom?

Bulgarellllli · 4 de fevereiro de 2020

Bom dia rapaziada, tranquilos? Então, estava desenvolvendo um site onde a parte dos serviços tem alguns ícones:

cada ícone quando selecionado faz aparecer um texto diferente logo abaixo:

Para tal "artimanha", eu dei "display: none;" em todos os textos e e usei o estado de inputs ocultos para fazê-los aparecer, transformando toda a "LI" em uma label, saca?

O problema é que a tela precisa rolar para baixo, então pensei: "vou usar um link interno". Porém, quando clico no link, a label não é acionada e o texto não aparece.

To colocando aqui toda o HTML referente ao que some e tal:

<!-- ícones de servicos -->
        <div class="dois">

            <ul class="options reset">
               
                <input type="radio" name="choice" id="opt1"> 
                <li class="li_um li_alm">
                    <label for="opt1">
                        <a href="">
                            <img src="http://rufiz.com.br/ambiente1/wp-content/uploads/2020/01/ícone-esocial-07.png">
                            <p>ESOCIAL E SST (SAÚDE E SEGURANÇA DO TRABALHO)</p>
                        </a>
                    </label>
                </li>
                
                <!-- esse brilha -->
                <input type="radio" name="choice" id="opt2">
                <li class="special li_alm">
                    <label for="opt2">
                        <img src="http://rufiz.com.br/ambiente1/wp-content/uploads/2020/01/ícone-esocial-vermelho-07.png">
                        <p>ESOCIAL EM ATRASO</p>
                    </label>    
                </li>

                <input type="radio" name="choice" id="opt3">
                <li class="li_tres li_alm">
                    <label for="opt3">
                        <img src="http://rufiz.com.br/ambiente1/wp-content/uploads/2020/01/ícone-folha-pagamento-07.png">
                        <p>FOLHA DE PAGAMENTO</p>
                    </label> 
                </li>

                <input type="radio" name="choice" id="opt4"> 
                <li class="li_quatro li_alm">
                    <label for="opt4">
                        <img src="http://rufiz.com.br/ambiente1/wp-content/uploads/2020/01/ícone-ponto-eletrônico-07.png">
                        <p>PONTO ELETRÔNICO</p>
                    </label> 
                </li>   

                <input type="radio" name="choice" id="opt5"> 
                <li class="li_cinco li_alm">
                    <label for="opt5">
                        <img src="http://rufiz.com.br/ambiente1/wp-content/uploads/2020/01/ícone-meu-rh-app-07.png">
                        <p>MEU RH (APP) E PORTAL CAPITAL HUMANO</p>
                    </label> 
                </li>

                <input type="radio" name="choice" id="opt6">
                <li class="li_seis li_alm">
                    <label for="opt6">
                        <img src="http://rufiz.com.br/ambiente1/wp-content/uploads/2020/01/ícone-recrutamento-07.png">
                        <p>RECRUTAMENTO E SELEÇÃO</p>
                    </label> 
                </li> 

                <input type="radio" name="choice" id="opt7"> 
                <li class="li_sete li_alm">
                    <label for="opt7">
                        <img src="http://rufiz.com.br/ambiente1/wp-content/uploads/2020/01/ícone-gestao-juridica-07.png">
                        <p>GESTÃO JURÍDICA</p>
                    </label> 
                </li>


                <input type="radio" name="choice" id="opt8"> 
                <li class="li_oito li_alm">
                    <label for="opt8">
                        <img src="http://rufiz.com.br/ambiente1/wp-content/uploads/2020/01/ícone-cargos-salarios-07.png">
                        <p>CARGOS & SALÁRIOS</p>
                    </label> 
                </li>

                <input type="radio" name="choice" id="opt9">
                <li class="li_nove li_alm">
                    <label for="opt9">
                        <img src="http://rufiz.com.br/ambiente1/wp-content/uploads/2020/01/ícone-modulo-treinamento-07.png">
                        <p>MÓDULO TREINAMENTO</p>
                    </label> 
                </li> 

                <input type="radio" name="choice" id="opt10"> 
                <li class="li_dez li_alm">
                    <label for="opt10">
                        <img src="http://rufiz.com.br/ambiente1/wp-content/uploads/2020/01/ícone-treinamentos-07.png">
                        <p>TREINAMENTOS PRESENCIAIS, IN COMPANY OU ONLINE</p>
                    </label> 
                </li>

                <div id="tres">
                    <div class="txt_1 face">
                        <h2 class="apresentation">ESocial</h2>
                        <p class="">
                            É um programa desenvolvido pelo Governo Federal que objetiva consolidar os processos das obrigações trabalhistas e previdenciárias, e unificar o envio de informações pelo empregador em relação aos seus empregados. Com a nova obrigação acessória existe alta exposição ao fisco para uma inspeção a distância no cruzamento de dados dos documentos digitais.
                        </p>
                        <ul class="lista_texto">
                            <li><p>Parametrização do ERP Protheus</p></li>
                            <li><p>Orientação no saneamento de dados (Qualificação Cadastral, Rubricas, Centro de Custos, Funções e Geração de inconsistências)</p></li>
                            <li><p>Acompanhamento na transmissão das cargas iniciais, não periódicos e periódicos</p></li>
                        </ul>
                    </div>

                    <div class="txt_2 face">
                        <h2 class="apresentation">Folha de Pagamento lalalala</h2>
                        
                        <ul class="lista_texto">
                            <li><p>Implantação folha de pagamento, módulo Gestão de Pessoal</p></li>
                            <li><p>Tratamento para categorias (mensalistas, horistas, autônomos)</p></li>
                            <li><p>Cálculos: Férias, rescisões, reajustes salariais, dissídio retroativo, folha de pagamento, provisões de férias e 13º salário</p></li>
                            <li><p>Controle de Históricos (ficha financeira, afastamentos, funções, salários, dentre outros)</p></li>
                            <li><p>Integrações com: financeiro, word (documentos admissionais), contabilidade, ponto eletrônico</p></li>
                            <li><p>Relatórios: Folha de Pagamento, INSS, FGTS, IRRF</p></li>
                            <li><p>Rotinas anuais: RAIS\DIRF\Informe de Rendimentos</p></li>
                            <li><p>Atender a legislação vigente, inclusive eSocial: Sistema Público de Escrituração Fiscal Digital (SPED) das Obrigações Fiscais Previdenciárias e Trabalhistas</p></li>
                            <li><p>Detalhamento do pagamento.</p></li>
                        </ul>
                    </div>

                    <div class="txt_3 face">
                        <h2 class="apresentation">Folha de Pagamento</h2>
                        
                        <ul class="lista_texto">
                            <li><p>Implantação folha de pagamento, módulo Gestão de Pessoal</p></li>
                            <li><p>Tratamento para categorias (mensalistas, horistas, autônomos)</p></li>
                            <li><p>Cálculos: Férias, rescisões, reajustes salariais, dissídio retroativo, folha de pagamento, provisões de férias e 13º salário</p></li>
                            <li><p>Controle de Históricos (ficha financeira, afastamentos, funções, salários, dentre outros)</p></li>
                            <li><p>Integrações com: financeiro, word (documentos admissionais), contabilidade, ponto eletrônico</p></li>
                            <li><p>Relatórios: Folha de Pagamento, INSS, FGTS, IRRF</p></li>
                            <li><p>Rotinas anuais: RAIS\DIRF\Informe de Rendimentos</p></li>
                            <li><p>Atender a legislação vigente, inclusive eSocial: Sistema Público de Escrituração Fiscal Digital (SPED) das Obrigações Fiscais Previdenciárias e Trabalhistas</p></li>
                            <li><p>Detalhamento do pagamento.</p></li>
                        </ul>
                    </div>

                    <div class="txt_4 face">
                        <h2 class="apresentation">Ponto Eletrônico</h2>
                        
                        <ul class="lista_texto">
                            <li><p>Implantação e suporte do Módulo Ponto Eletrônico Protheus</p></li>
                            <li><p>Capacitação dos usuários na execução das movimentações deste módulo, tais como: importação marcações, manutenção do ponto, reapontamento, cálculo mensal, integração com a Folha de Pagamento</p></li>
                            <li><p>Fechamento do Banco de Horas e Fechamento Mensal</p></li>
                        </ul>
                    </div>

                    <div class="txt_5 face">
                        <h2 class="apresentation">Meu RH (App)</h2>
                        <p class="">
                            O app "Meu RH" é uma evolução dos nossos atuais portais de RH (Protheus), herdando suas funcionalidades, porém com uma melhor usabilidade e totalmente adaptável a qualquer dispositivo mobile como tablet’s e smartphones.
                            Abaixo seguem as funcionalidades:
                        </p>
                        <ul class="lista_texto">
                            <li><p>Gestão de Férias</p></li>
                            <li><p>Consulta de férias da equipe</p></li>
                            <li><p>Aprovação de férias dos colaboradores do time</p></li>
                            <li><p>Dados Pessoais</p></li>
                            <li><p>Visualização do perfil do usuário</p></li>
                            <li><p>Edição de alguns dados do usuário</p></li>
                            <li><p>Consulta à Folha de Pagamento</p></li>
                            <li><p>Visualização da lista de pagamentos</p></li>
                            <li><p>Detalhamento do pagamento</p></li>
                            <li><p>Consulta do informe de rendimentos</p></li>
                            <li><p>Consulta Ponto</p></li>
                            <li><p>Visualização do espelho de ponto</p></li>
                            <li><p>Consulta das batidas de realizadas</p></li>
                            <li><p>Inclusão manual das batidas de ponto</p></li>
                            <li><p>Consulta das ocorrências diárias de ponto</p></li>
                            <li><p>Consulta do resumo das ocorrências totais do período de ponto</p></li>
                            <li><p>Inclusão de abonos e atestados para o ponto</p></li>
                            <li><p>Aprovação de abonos / atestado dos colaboradores de seu time</p></li>
                        </ul>
                    </div>

                    <div class="txt_6 face">
                        <h2 class="apresentation">Recrutamento & Seleção</h2>
                        <p class="lista_texto">
                            O app "Meu RH" é uma evolução dos nossos atuais portais de RH (Protheus), herdando suas funcionalidades,<br> porém com uma melhor usuabilidade e totalmente adaptável a qualquer dispositivo mobile como tablet's e smartphones. <br> Abaixo seguem as funcionalidades:
                        </p>
                        <ul class="lista_texto">
                            <li><p>Realizar o recrutamento de pessoas capacitadas, adequando a necessidade do quadro de Vagas e ao processo seletivo da empresa</p></li>
                            <li><p>Controle das Vagas</p></li>
                            <li><p>Controle e realização dos Testes</p></li>
                            <li><p>Consultar os currículos e testes realizados pelos candidatos a qualquer momento</p></li>
                            <li><p>Mantém todo histórico das informações</p></li>
                            <li><p>Pesquisa de Candidatos através dos requisitos do cargo ou por qualquer dado do currículo</p></li>
                            <li><p>Permite a aplicação de testes informatizados, obtendo o resultado imediato o que facilita o processo da seleção</p></li>
                            <li><p>Programação e controle da Agenda do candidato Processo de Admissão integrado a folha de Pagamento</p></li>
                            <li><p>Entrada automatizada de currículo, item que permite a importação de currículos no formato XLM ou servidor FTP.</p></li>
                        </ul>
                    </div>

                    <div class="txt_7 face">
                        <h2 class="apresentation">Gestão Jurídica</h2>
                        
                        <ul class="lista_texto">
                            <li><p>Atender aos Departamentos Jurídicos de empresas na Administração das Contingências, Gestão de Procurações e Documentos societários, facilitar o relacionamento com escritórios parceiros e fornecer maior sinergia com as áreas Contábil e Recursos Humanos. Permite controlar a agenda de compromissos dos processos, prazos. Funciona em Android e IOS</p></li>
                        </ul>
                    </div>

                    <div class="txt_8 face">
                        <h2 class="apresentation">Cargos & Salários</h2>
                        <p class="">
                            É uma ferramenta ideal para você realizar todo acompanhamento de forma simplificada e organizada dos cargos da empresa. 
                        </p>
                        <ul class="lista_texto">
                            <li><p>Administrar Cargos e Salários, através dos fatores de avaliação, graduação de fatores e pontuação</p></li>
                            <li><p>Definição de classes salariais</p></li>
                            <li><p>Aumento programado</p></li>
                            <li><p>Quadro de funcionário por função</p></li>
                            <li><p>Flexibilidade de tabela salarial</p></li>
                            <li><p>Simulação de tabela salarial</p></li>
                            <li><p>Adequação de salários à tabela salarial</p></li>
                        </ul>
                    </div>

                    <div class="txt_9 face">
                        <h2 class="apresentation">Módulo Treinamento</h2>
                        
                        <ul class="lista_texto">
                            <li><p>Permite administrar e controlar as necessidades de treinamento</p></li>
                            <li><p>Planejar e avaliar os resultados obtidos</p></li>
                            <li><p>Aprovação de férias dos colaboradores do time.</p></li>
                            <li><p>Manter histórico de treinamentos</p></li>
                            <li><p>Demonstrativo dos custos com treinamentos</p></li>
                            <li><p>Definição dos calendários de treinamentos e seleção dos participantes</p></li>
                            <li><p>Avaliação sobre o treinamento, instrutor e os participantes</p></li>
                            <li><p>Emissão de certificados aos participantes</p></li>
                            <li><p>Permite montar o planejamento anual de treinamento</p></li>
                        </ul>
                    </div>

                    <div class="txt_10 face">
                        <h2 class="apresentation">Treinamentos Presencial, in Company ou Online</h2>
                        
                        <ul class="lista_texto">
                            <li><p>Esocial</p></li>
                            <li><p>SST</p></li>
                            <li><p>Folha de Pagamento</p></li>
                            <li><p>Recrutamento e seleção</p></li>
                            <a href="http://rufiz.com.br/ambiente1/treinamentos/"><li class="ball_none"><p class="bt_yellow">Inscreva-se aqui</p></li></a>
                        </ul>
                    </div>
                </div>
            </div> 
        </ul>
    </div>

        <!-- divs dos txts que somem e aparecem -->

Agora o CSS


/*sumindo com o txt:*/
.txt_1, .txt_2, .txt_3, .txt_4, .txt_5, .txt_6, .txt_7, .txt_8, .txt_9, .txt_10 {
  display: none;
}

/*fazendo a li piscar e fazendo-a parar também*/
.special{
  animation: pisca-pisca .8s linear infinite;
}

@media (min-width: 1140px){
li.special:hover {
    animation: none;
}
}

#opt2:checked ~ .special {
    animation: none !important;
}

/*checado e surgimento do texto*/
#opt1:checked ~ .li_um {
    background-color: #FFFF00 !important;
}

#opt2:checked ~ .special {
    background-color: #FFFF00 !important;
}

#opt3:checked ~ .li_tres {
    background-color: #FFFF00 !important;
}

#opt4:checked ~ .li_quatro {
    background-color: #FFFF00 !important;
}

#opt5:checked ~ .li_cinco {
    background-color: #FFFF00 !important;
}

#opt6:checked ~ .li_seis {
    background-color: #FFFF00 !important;
}

#opt7:checked ~ .li_sete {
    background-color: #FFFF00 !important;
}

#opt8:checked ~ .li_oito {
    background-color: #FFFF00 !important;
}

#opt9:checked ~ .li_nove {
    background-color: #FFFF00 !important;
}

#opt10:checked ~ .li_dez {
    background-color: #FFFF00 !important;
}

/*surgimento do txt*/
#opt1:checked ~  #tres .txt_1 {
    display: block;
}

#opt2:checked ~ #tres .txt_2 {
    display: block;
}

#opt3:checked ~ #tres .txt_3 {
    display: block;
}

#opt4:checked ~ #tres .txt_4{
    display: block;
}

#opt5:checked ~ #tres .txt_5 {
    display: block;
}

#opt6:checked ~ #tres .txt_6 {
    display: block;
}

#opt7:checked ~ #tres .txt_7 {
    display: block;
}

#opt8:checked ~ #tres .txt_8 {
    display: block;
}

#opt9:checked ~ #tres .txt_9 {
    display: block;
}

#opt10:checked ~ #tres .txt_10 {
    display: block;
}
/*checado e surgimento do texto*/

Bom, talvez seja um problema simples de resolver com alguma outra linguagem, porém estou muito perdido. desde já agradeço muito se você leu saca? É noiz galera, valeu!!!

edit1: quando colocamos o link junto dentro da label ele a inibe, como se não fosse possível seleciona-la. Quando é ao contrário(label dentro do link), ele fica como um faixinha no topo da label e ainda assim, não é possível selecionar os dois.

Luís Roberto C. da Silva · 4 de fevereiro de 2020

Acho que deveria ser melhor criar uma div abaixo do menu e inserir dinamicamente os textos correspondentes ao selecionar cada ícone, utilizando Jquery.

Bulgarellllli · 4 de fevereiro de 2020

@Luís Roberto C. da Silva então, o problema não é o aparecimento dos textos e sim a parte de rolagem. Precisaríamos rolar a página à medida que o texto muda, o que vai ajudar muito no mobile principalmente saca?

Luís Roberto C. da Silva · 4 de fevereiro de 2020

@Bulgarellllli Então, uma div com css scroll:auto vai aparecer a barra de rolagem.

Bulgarellllli · 4 de fevereiro de 2020

@Luís Roberto C. da Silva barra? Eu precisava que fosse algo automático saca? igual aos links internos

DiF · 5 de fevereiro de 2020

@Bulgarellllli Então você se refere a âncoras. Você pode usar esse método e aplicar o efeito de rolagem com CSS.

Ou se precisar, pode usar jQuery.

Veja um exemplo usando apenas CSS https://jsfiddle.net/dife/gsoz1gnc/

Bulgarellllli · 5 de fevereiro de 2020

@DiF Eae mano, tranquilo? Então, usei esse método de negativar a margin-top, porém além da div "subir" no menu, ela ainda iria ficar estática ali saca? E eu pensando que era simples fazer a tela rolar kkk

Bulgarellllli · 20 de fevereiro de 2020

@DiF @Luís Roberto C. da Silva Então pessoas, consegui uma solução para esse "probrema". Seguinte:

<script>
    // faz a rolagem dos ícones do menu
    $('ul.options.reset label').click(function( ){
        var id = $(this),
        targetOffset = $('.li_dez').offset().top,
        menuHeight = $('#menu_rz').innerHeight()

        $('html, body').animate({
            scrollTop: targetOffset + menuHeight
        }, 500);
    });
</script>

Esse script tipo pega a distância da última li até o topo da página e tipo subtrai ela, fazendo a página subir até aparecer o texto. tendeu? adaptei o cod. desse vídeo:

Então é isso cavalheiros, muito obrigado pela ajuda, ajudou muito!!