HTML Botão aparecer texto ao clicar na mesma pagina

vormox · 10 de março de 2018

Nao sei ao certo se é HTML ou javascript

queria colocar em meu site uma opção que mostre textos ao clicar nos botões descrição, requisitos ...

Queria saber como faço um igual ao clicar aparecer o conteúdo

DiF · 10 de março de 2018

Olá, pelo que entendi você quer ter um painel com abas, onde cada um abre um conteúdo diferente.

Você pode fazer com o HTML5 e jQuery.

Primeiro você monta a estrutura do painel usando o elemento <UL> e em cada <LI> você define o novo atributo do HTML5 com prefixo data-. no elemento <a>.

Ficando desta forma:

<ul id="menu">
    <li><a data-page="historia" href="#"><h3> História </h3> </a></li>
    <li><a data-page="requisitos" href="#"><h3> Requisitos </h3> </a></li> 
    <li><a data-page="prints" href="#"><h3> Screenshots </h3> </a></li>
</ul>

Agora você precisa criar a estrutura para o conteúdo de cada elemento do UL.

<div id="pages">
        <!-- Início seção história-->
        <section id="historia" class="page" data-page="historia">
                <header> História </header>
                <p> se passando duzentos anos depois dos eventos de Oblivion. 
                    Na premissa de Skyrim, o Império começa a ceder territórios
                    para as nações Élficas uma vez governadas, porque não há 
                    nenhum herdeiro para o trono do Imperador. Os Blades não tem 
                    ninguém para defender, e gradualmente morreram, foram assassinados 
                    ou se isolaram do resto do mundo. Depois do assassinato do Rei de 
                    Skyrim, uma guerra civil irrompe entre as raças nativas Nord — sendo 
                    a maioria aqueles que desejavam que Skyrim se separe do Império, 
                    e o resto sendo aqueles que desejam que Skyrim permaneça no Império.
                </p>
          </section>
          <!-- Fim seção história-->
    
          <!-- Início seção Requisitos--> 
          <section id="requisitos" class="page hide" data-page="requisitos">
                <header> Requisitos </header>
                
                <p> MÍNIMOS:</p>
                <p>SO: Windows 7/8.1/10 (64-bit Version)</p>
                <p>Processador: Core i5-750/AMD Phenom II X4-945</p>
                <p>Memória: 8 GB de RAM</p>
                <p>Placa de vídeo: NVIDIA GTX 470 1GB /AMD HD 7870 2GB</p>
                <p>Armazenamento: 12 GB de espaço disponível</p>

                <br/>

                <p>RECOMENDADOS:</p>
                <p>SO: Windows 7/8.1/10 (64-bit Version)</p>
                <p>Processador: Core i5-2400/AMD FX-8320</p>
                <p> Memória: 8 GB de RAM</p>
                <p> Placa de vídeo: NVIDIA GTX 780 3GB /AMD R9 290 4GB</p>
                <p>Armazenamento: 12 GB de espaço disponível</p>
          </section>
          <!-- Fim seção requisitos-->
         
          <!-- Início seção printscreens-->
          <section id="prints" class="page hide" data-page="prints">
                <header> Printscreens </header>
                <img src="http://mmosgame.com/downloads/The-Elder-Scrolls-V-Skyrim2.jpg"/>
	        <img src="http://mmosgame.com/downloads/The-Elder-Scrolls-V-Skyrim3.jpg"/>
         </section> 
         <!-- FIM seção história-->
    </div>

Repare que a estrutura está dividida em:

<div> como pacote do conteúdo.

<section> são cada ítem do pacote. As seções.

<header> é um elemento novo usado para cabeçalho dentro de uma seção.

Concluindo esta parte da estrutura, você vai criar as regras de estilo, ou seja, a formatação CSS

#menu li {
   display: inline-block;
   width: 200px;
   height: 50px;
   background: green;
   line-height: 50px;
   text-align: center;
   font-size: 18pt; 
}

#menu li a{
  color: #fff;
  text-decoration: none;
}

#pages section header{
  font-size: 24pt;
  margin-bottom: 1em;
}

.page{display: none;}
.hide { display: none;}
.active{ background: red !important; }

Basicamente, ali começa com a regra para o elemento <LI> do painel. onde colocamos lado a lado definindo como display: inline-block

Depois temos uma regra para o link dentro do <LI>

Temos também uma regra para o elemento header, que está dentro de todos os elementos sections contido no elemento DIV cujo id é pages.

Além das 3 regras usando ID, temos 3 regras usando classe.

o page, hide e active. onde o page esconde inicialmente o conteúdo, hide esconde ao trocar itens e o active substitui a cor de fundo do elemento <LI>

Para que tudo funcione, é necessário usar o jQuery. Recomendo sempre utilizar a versão mais recente.

O melhor jeito é importar a biblioteca jQuery usando o CDN online desta forma:

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Você coloca isso normalmente dentro do elemento <head> ou seguir as boas práticas de colocar antes de fechar a tag <body>

Com o jQuery importado vamos criar o código para mostar e esconder os elementos:

//Quando o documento estiver pronto
$(document).ready(function() {
   
    //Função que mostra o conteúdo de acordo com o botão clicado
    $("#menu li a").on('click', function(e) {
        e.preventDefault();
        var page = $(this).data('page');
        $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
            $(this).addClass('hide');
            $('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
        });
    });
    
    //Função que insere a classe Active no botão que foi clicado
    $("#menu li").on('click', function(){
         $(this).siblings().removeClass('active');
         $(this).addClass('active');
    });
});

Basicamente, você obtém o valor do atributo data-page e armazena na variável page.

Executamos a função fadeOut encadeada com a stop() para o elemento que não tenha a classe hide.

O pseudo elemento $(this) refere-se ao próprio elemento, nesse caso o que não tem hide, passa a ter.

Na próxima linha faz com que o elemento que tenha o atributo data-page igual ao do painel , seja mostrado usando um efeito de fadeIn e remove a classe hide.

Depois temos uma função para que quando o elemento do painel seja clicado, adicionar a classe active no elemento <LI> do painel. assim mostrando qual está ativo no momento.

Você pode ver o exemplo funcionar neste link: https://jsfiddle.net/dife/jjhhwhkL/47/