Ocultar div quando outra está sendo mostrada
Olá, esse é o meu primeiro tópico aqui, então me desculpem se eu escreve algo errado, também não sou muito boa com css/html essas coisas, tudo que eu sei eu aprendi pesquisando, então vamos lá:
Eu tenho um blog de vídeos de desenhos, então nos vídeos eu quero adicionar mais de uma opção de player, como nesse site aqui: http://animeai.xpg.uol.com.br/552316.html
Eu quero assim: Quando uma pessoa clicar em uma imagem ou palavra "Player 1", apareça um vídeo e se eu clicar no player 2 o player 1 vai sumir, então aparece um outro vídeo no mesmo lugar do player 1 (Não consegui explicar de outra forma)
O máximo que eu consegui foi isso:
<style type="text/css">
.escondida {
display:none;
}
</style>
<script type="text/javascript">
function abrir() {
var main = document.getElementById("central");
var iten = main.getElementsByTagName("input");
if (iten) {
for (var i=0;i<iten.length;i++) {
iten[i].onclick = function() {
var el = document.getElementById(this.id.substr(7,7));
if (el.style.display == "block")
el.style.display = "none";
else
el.style.display = "block";
}
}
}
}
window.onload=abrir;
</script>
<br />
<div id="central">
<input id="receita1" type="button" value="Player 1" />
<input id="receita2" type="button" value="Player 2" />
<input id="receita3" type="button" value="Player 3" />
<input id="receita4" type="button" value="Player 4" />
<br />
<div class="escondida" id="1">
<iframe height="474" src="https://drive.google.com/file/d/0B8Bn-5dv4WO-N3FZSEFwbERMakE/preview" width="811"></iframe></div>
<div class="escondida" id="2">
<iframe height="474" src="https://drive.google.com/file/d/0B8Bn-5dv4WO-N3FZSEFwbERMakE/preview" width="811"></iframe></div>
<div class="escondida" id="3">
<iframe height="474" src="https://drive.google.com/file/d/0B8Bn-5dv4WO-N3FZSEFwbERMakE/preview" width="811"></iframe></div>
<div class="escondida" id="4">
<iframe height="474" src="https://drive.google.com/file/d/0B8Bn-5dv4WO-N3FZSEFwbERMakE/preview" width="811"></iframe></div>
</script>
</div>Discussão (0)
Carregando comentários...