2

Preciso fazer com que ao clicar no item do menu, uma div linkada a esse item apareça na tela, se eu clicar em outro item do menu, a div anterior desaparece e a nova div apareça... na foto abaixo da pra ter uma ideia do que preciso:inserir a descrição da imagem aqui

Quando eu clicar em GOLEIROS por exemplo, vai desaparecer a div que contem as imagens da DEFESA e vai aparecer a div com as imagens dos goleiros.

1
  • Estilo um navbar, um menu ? Commented 28/07/2017 às 12:42

3 Respostas 3

3

Vi que você colocou a tag jQuery, porém esse resultado é bastante parecido usando somente CSS:

#time { width: 100%; height: 150px;
  overflow: hidden; text-align: center;
  background-color: #005500; }

.jogadores { width: 100%; height: 150px; }

.jogadores h3{ color: #FFF; }

#menu { width: 100%; text-align: center;
  background-color: #004500; }

#menu ul{ margin: 0; }

#menu li { display: inline-block; padding: 10px; }

#menu a { text-decoration: none; color: #FFF; }
<div id="time">
  <div id="goleiros" class="jogadores"><h3>Goleiros</h3></div>
  <div id="defesa" class="jogadores"><h3>Defesa</h3></div>
  <div id="laterais" class="jogadores"><h3>Laterais</h3></div>
</div>
<div id="menu">
  <ul>
    <li><a href="#goleiros">Goleiros</a></li>
    <li><a href="#defesa">Defesa</a></li>
    <li><a href="#laterais">Laterais</a></li>
  </ul>
</div>

A ideia neste código foi colocar a div dos jogadores com o mesmo tamanho da div que elas estão dentro, o overflow: hidden é para que exiba uma div de cada vez e que só exiba a outra div quando clicar no link do menu que está apontando para o id de cada uma.

O restante é contigo.

1
  • 1
    Perfeito! Funcionou certinho
    – Clayton
    Commented 31/07/2017 às 12:34
2

Pelo o que eu entendi o código abaixo pode resolver seu problema, claro que você deverá mudar algumas coisinhas, mas a essência é essa. Espero ter ajudado. HTML

<button onclick="showataque()">Ataque</button>

<div id="ataque">
   <h1>ATAQUE</h1>
</div>

<button onclick="showdefesa()">Defesa</button>

<div id="defesa">
  <h1>DEFESA</h1>
</div>

CSS

#ataque {
display: none;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
#defesa {
display: none;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}

JavaScript

function showataque() {
   var x = document.getElementById('ataque');
      if (x.style.display === 'none') {
          x.style.display = 'block';
      } else {
          x.style.display = 'none';
      }
}

function showdefesa() {
   var y = document.getElementById('defesa');
      if (y.style.display === 'none') {
          y.style.display = 'block';
      } else {
          y.style.display = 'none';
      }
}
1

Veja esse exemplo, acredito que seja mais ou menos isso que você quer!

function mostraDiv(caller) {
        if (caller.id === 'goleiros') {
            $("#divGoleiros").attr("style", "display: block");
            $("#divDefesa").attr("style", "display: none");
            $("#divLaterais").attr("style", "display: none");
            $("#divVolantes").attr("style", "display: none");
        } else if (caller.id === 'defesa') {
            $("#divGoleiros").attr("style", "display: none");
            $("#divDefesa").attr("style", "display: block");
            $("#divLaterais").attr("style", "display: none");
            $("#divVolantes").attr("style", "display: none");
        } else if (caller.id === 'laterais') {
            $("#divGoleiros").attr("style", "display: none");
            $("#divDefesa").attr("style", "display: none");
            $("#divLaterais").attr("style", "display: block");
            $("#divVolantes").attr("style", "display: none");
        } else if (caller.id === 'volantes') {
            $("#divGoleiros").attr("style", "display: none");
            $("#divDefesa").attr("style", "display: none");
            $("#divLaterais").attr("style", "display: none");
            $("#divVolantes").attr("style", "display: block");
        }
    }
img {
    height: 240px;
}

.navbar {
        overflow: hidden;
        background-color: #333;
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #3e8e41;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    a {cursor: pointer;}
    .navbar a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

    .show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
    <a id="goleiros" onclick="mostraDiv(this)">GOLEIROS</a>
    <a id="defesa" onclick="mostraDiv(this)">DEFESA</a>
    <a id="laterais" onclick="mostraDiv(this)">LATERAIS</a>
    <a id="volantes" onclick="mostraDiv(this)">VOLANTES</a>
</div>

<div id="divGoleiros" style="display: none; background-color: red; height: 100%; width: 100%;">
    <center>
      <img src="https://choquereimajestoso.files.wordpress.com/2012/11/goleiro-bruno-palmeiras.jpg" height='auto'> <!-- https://camisa23.files.wordpress.com/2014/06/gj.jpg -->
    </center>
</div>
<div id="divDefesa" style="display: none; background-color: red; height: 100%; width: 100%;">
    <center>
      <img src="https://i.sstatic.net/9GQFd.jpg">
    </center>
</div>
<div id="divLaterais" style="display: none; background-color: red; height: 100%; width: 100%;">
    <center>
      <img src="http://jconlineimagem.ne10.uol.com.br/imagem/noticia/2017/06/11/normal/46212346eebee6919fd2fb41c521a744.jpg">
    </center>
</div>
<div id="divVolantes" style="display: none; background-color: red; height: 100%; width: 100%;">
    <center>
      <img src="http://torcedores.uol.com.br/content/uploads/2015/06/palmeiras-adidas-599x400.jpg">
    </center>
</div>

Coloquei a imagem que tu forneceu (sem editar) só para você ter uma noção de como ficaria.

Referências:

3
  • Quase isso... seu código está funcionando quando eu clico no item DEFESA a DivDefesa aparece...mas eu preciso que quando eu clicar nos outros itens do menu, a DIV correspondente aquele menu apareca e as outras divs fiquem ocultas...
    – Clayton
    Commented 28/07/2017 às 17:14
  • 1
    então você precisa fazer uma chamada para cada div, ele só fez defesa, basta pegar o código, copiar e colar e criar todas as outras
    – flourigh
    Commented 31/07/2017 às 0:03
  • @Clayton, é exatamente conforme o flourigh falou, eu só coloquei um exemplo de como você deve prosseguir! Você não quer o código pronto né ? Commented 31/07/2017 às 11:12

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 .