-3

esou com uma dúvida daquelas. Estou refazendo uma páginade um site médico onde tem um glosario de busca doenças pela letra index,A,B,C,D,E............

Na pagina, havia um espaço para os botoes de busca, estou apanhando para fazer o evendo, exemplo cliquei no botão A, tenho que esconder as DIVS, b,c,d,e....etc

se clicar em S tem que esconder as divs, a,b,c,d,e,f,g,h,i,j .... e somente ficar a S. Como consigo fazer isso em Jquery ou javascript, to tentando mas acaba escondendo a que deve ficar a mostra.

 <input type='submit' class="button" onclick="showPage('#A')" value="A"/>
                                <input type='submit' class="button" onclick="showPage('#B')"value="B"/>
                                <input type='submit' class="button" value="C"/>
                                <input type='submit' class="button" value="D"/>
                                <input type='submit' class="button" value="E"/>
                                <input type='submit' class="button" value="F"/>
                                <input type='submit' class="button" value="G"/>
                                <input type='submit' class="button" value="H"/>
                                <input type='submit' class="button" value="I"/>
                                <input type='submit' class="button" value="J"/>
                                <input type='submit' class="button" value="K"/>
                                <input type='submit' class="button" value="L"/>
                                <input type='submit' class="button" value="M"/>
                                <input type='submit' class="button" value="N"/>
                                <input type='submit' class="button" value="O"/>
                                <input type='submit' class="button" value="P"/>
                                <input type='submit' class="button" value="Q"/>
                                <input type='submit' class="button" value="R"/>
                                <input type='submit' class="button" value="S"/>
                                <input type='submit' class="button" value="T"/>
                                <input type='submit' class="button" value="U"/>
                                <input type='submit' class="button" value="V"/>
                                <input type='submit' class="button" value="X"/>
                                <input type='submit' class="button" value="Y"/>
                                <input type='submit' class="button" value="Z"/>
1
  • Cara o primeiro passo é trocar o type='submit' pot type='button' no Input. Faz isso e testa
    – hugocsl
    Commented 13/06/2020 às 20:06

2 Respostas 2

0

$(document).ready(function(){
    $(".button").click(function(){
         var inputValue = $(this).val();
         if(inputValue){
            //mostra a div com classe correspondente ao Value do input clicado
            $("." + inputValue).show();
            //Esconde as divs class .box e que não tem a classe correspondente ao value do input
            $(".box").not("." + inputValue).hide();
            
         }
    });
});
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <div> 
        <input type='submit' class="button" value="A"/>
        <input type='submit' class="button" value="B"/>
        <input type='submit' class="button" value="C"/>
        <input type='submit' class="button" value="D"/>
    </div>
    
    <div class="A box">
        Div AAAA
    </div>
    
    <div class="B box">
        Div BBBB
    </div>
    
    <div class="C box">
        Div CCCC
    </div>
    
    <div class="D box">
        Div DDDD
    </div>

2
  • Leo bom dia teria como fazer essa funcão do jquery para buscar o ID, envés do nome. Commented 14/06/2020 às 14:39
  • @PedroHenriqueSilvadeDeus, na sua pergunta não tem ID. Edite a pergunta colocando o código adequado
    – user60252
    Commented 14/06/2020 às 14:51
0

Acabei alterando o codigo porque vi que necessitava tratar mais algumas condições.

function showPage(num) 
        {
            if(num.match('A'))
            {
                                
                document.getElementById('A').style.display="block";
                if($('#B').css('display') == 'none')
                {   
                    //alert("hiider");
                    document.getElementById('B').style.display="block"
                }       
                else if($('#B').is(':visible'))
                {
                       // alert("hiddsr");
                    document.getElementById('B').style.display="none"
                }   
                if($('#C').css('display') == 'none')
                {   
                    //alert("hiider");
                    document.getElementById('C').style.display="block"
                }       
                else if($('#C').is(':visible'))
                {
                       // alert("hiddsr");
                    document.getElementById('C').style.display="none"
                }   
               
            }

Agora está funcionando do jeito que me requisitaram,Obrigado Pela Ajuda

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 .