0

Estou criando uma pagina simples em HTML e separei a pagina em duas verticalmente, sendo dessa formainserir a descrição da imagem aqui

na parte que está em azul iria o logo e as info da ferramenta (ainda não fiz). Quando eu clico nos botões ele mostras as informações, e mudando conforme mudo de botão.

A minha duvida é: como fazer que o logo e as informações da ferramenta possa "ocultar" ao clicar nos botões?

HTML :

<body>
    <div id="conteudo">
            <div id="links">
                <ul>
                <li class="Tela01" onclick="mostraInformacao('lorem')" onclick="">
                    <img src="btn01.png">
                    <p>tela 01</p>
                </li>
                <li class="Tela02" onclick="mostraInformacao('ipsum')">
                    <img src="btn01.png">
                    <p>tela 02</p></li>
                </ul>
                <ul>
                <li class="Tela03" onclick="mostraInformacao('lorem')">
                    <img src="btn01.png">
                    <p>tela 03</p>
                </li>
                <li class="Tela04" onclick="mostraInformacao('ipsum')">
                    <img src="btn01.png">
                    <p>tela 04</p>
                </li>
                </ul>

            </div>
       <div class="Info">  
           <div id="informacao">
               <div class="ocultaMostra">
                    USHUAHSUASHUAHSUASUASHAUSUASHUSASS
               </div>
           </div>       
            <div id="respostas">
                <div id="lorem" class="faq">Lorem Lorem Lorem Lorem Lorem Lorem Lorem
                Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
                Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
                Lorem Lorem Lorem Lorem Lorem Lorem Lorem </div>
                <div id="ipsum" class="faq">Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
                Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
                Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
                Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum </div>
                <div id="lorem" class="faq">Lorem Lorem Lorem Lorem Lorem Lorem Lorem
                Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
                Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
                Lorem Lorem Lorem Lorem Lorem Lorem Lorem </div>
                <div id="ipsum" class="faq">Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
                Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
                Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
                Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum </div>

            </div>
        </div>    
    </div>

CSS :

#links {
float: left;
max-width: 50%; 
}
#links li {
cursor: pointer;
transition: 0.3s ease;
opacity: 0.7;
}

#links li:hover {
opacity: 1;
}

#respostas {
float: right;
max-width: 50%;
}

.faq {
margin: 20px;
color: white;
display: none; /* coloca todos como invisiveis inicialmente */
}
*{
font-family: 'Courier New', Courier, monospace;

}
.ocultaMostra{
   display: inline;
   color: aliceblue;
 }

.Tela01{
display: flex;
position: absolute; 
margin-left: 5%;
margin-top: 5%;
}
.Tela02{
display: flex;
position: absolute;
margin-left: 20%;
margin-top: 5%;
}
.Tela03{
display: flex;
position: absolute; 
margin-left: 5%;
margin-top: 20%;
}
.Tela04{
display: flex;
position: absolute;
margin-left: 20%;
margin-top: 20%;
}
.Info{
background: linear-gradient(to bottom , #12304b , black );
position: absolute;
height: 100%;
width: 60%;
margin-left: 40%
}

.NomeDaFerramenta{
font-size: 60px;
margin-left: 60%;
background: transparent;
z-index: 1;
position: absolute;
}
.infoMostrar{
display: none;
}

JS :

function mostraInformacao(id){
respostas = document.getElementsByClassName('faq');
for (var i = 0; i < respostas.length; i++) { 
  respostas[i].style.display = 'none'; 
}
clicada = document.getElementById(id); 
clicada.style.display = 'inherit'; 

}
function ocultarInfoPrincipal(id){
informacao = document.getElementsByName('ocultaMostra');
for (var i = 0; i < informacao.length; i++) {
    informacao[i].style.display = 'inline'; 
  }
mostraInformacao(informacao);
clicou.style.display = 'none'; 
}
5
  • Realmente não deu pra entender o que vc quer fazer. Tente explicar melhor com mais clareza. Cada botão terá uma <div class="ocultaMostra">?
    – Sam
    Commented 4/11/2018 às 19:18
  • @sam, não, a ideia basicamente é montar como se fosse um cardápio, onde apos eu clicar em um dos botões iria para informações referente ao botão. Só que estou com dificuldade de fazer que ao clicar no botão a "tela principal" mude para informação do botão Commented 4/11/2018 às 19:43
  • Certo. Só que vc está usando id repetidos, isso não pode. Vc quer ocultar a div ocultaMostra ao clicar em qualquer botão?
    – Sam
    Commented 4/11/2018 às 19:47
  • Vc tb está fazendo um loop na classe ocultaMostra, mas só existe 1 div com essa classe. Isso que não está dando pra entender.
    – Sam
    Commented 4/11/2018 às 19:52
  • Estuda Jquery, com ele você consegue fazer isso que você quer
    – Renan
    Commented 5/11/2018 às 18:49

1 Resposta 1

1

Se eu entendi direito, vou apresentar uma sugestão:

O que mudei foi adicionar IDs unicos nas divs de resposta e utilizei Jquery.

HTML:

<div id="conteudo">
            <div id="links">
                <ul>
                <li class="Tela01" onclick="mostraInformacao('tela1')" onclick="">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png">
                    <p>tela 01</p>
                </li>
                <li class="Tela02" onclick="mostraInformacao('tela2')">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png">
                    <p>tela 02</p></li>
                </ul>
                <ul>
                <li class="Tela03" onclick="mostraInformacao('tela3')">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png">
                    <p>tela 03</p>
                </li>
                <li class="Tela04" onclick="mostraInformacao('tela4')">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png">
                    <p>tela 04</p>
                </li>
                </ul>

            </div>
       <div class="Info">  
           <div id="informacao">
               <div class="ocultaMostra">
                    USHUAHSUASHUAHSUASUASHAUSUASHUSASS
               </div>
           </div>       
           <div id="respostas">
               <div id="tela1" class="faq">Tela 1</div>
               <div id="tela2" class="faq">Tela 2</div>
               <div id="tela3" class="faq">Tela 3</div>
               <div id="tela4" class="faq">Tela 4</div>
           </div>
        </div>    
    </div>

JQuery:

window.mostraInformacao = function (idObj) 
{
    $("#informacao").hide();
  $("#respostas div[class='faq']:visible").hide();

    $("#" + idObj).show();
}

CSS:

#links {
float: left;
max-width: 50%; 
}
#links li {
cursor: pointer;
transition: 0.3s ease;
opacity: 0.7;
}

#links li:hover {
opacity: 1;
}

#respostas {
float: right;
max-width: 50%;
}

.faq {
margin: 20px;
color: white;
display: none; /* coloca todos como invisiveis inicialmente */
}
*{
font-family: 'Courier New', Courier, monospace;

}
.ocultaMostra{
   display: inline;
   color: aliceblue;
 }

.Tela01{
display: flex;
position: absolute; 
margin-left: 5%;
margin-top: 5%;
}
.Tela02{
display: flex;
position: absolute;
margin-left: 20%;
margin-top: 5%;
}
.Tela03{
display: flex;
position: absolute; 
margin-left: 5%;
margin-top: 20%;
}
.Tela04{
display: flex;
position: absolute;
margin-left: 20%;
margin-top: 20%;
}
.Info{
background: linear-gradient(to bottom , #12304b , black );
position: absolute;
height: 100%;
width: 60%;
margin-left: 40%
}

.NomeDaFerramenta{
font-size: 60px;
margin-left: 60%;
background: transparent;
z-index: 1;
position: absolute;
}
.infoMostrar{
display: none;
}

Funcionando em: https://jsfiddle.net/s0qbz4ex/

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