Ir ao conteúdo
  • Cadastre-se
vormox

HTML Botão aparecer texto ao clicar na mesma pagina

Recommended Posts

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 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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/

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×