Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Entre para seguir isso  
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 

Editado por DiF
Remover LInk com pirataria e adequar o post

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

Nossa man tu é bom valeu pela ajuda, agradeço muito

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

Entre para seguir isso  





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

×