Tengo unas opciones al ingresar a la pagina, que por defecto tiene que mostrar solo un DIV, y si selecciono una opcion, deseo que solo aparesca lo que seleccione, muestro ejemplo:
<html lang="es-ar">
<head>
<meta charset="UTF-8">
<meta name="author" content="Jorge B Rivero" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function retro() {
$('#retro').show(); //muestro mediante id
$('#rock').hide(); //oculto mediante id
$('#dance').hide(); //oculto mediante id
$('#rege').hide(); //oculto mediante id
}
function rock() {
$('#rock').show(); //muestro mediante id
$('#retro').hide(); //oculto mediante id
$('#dance').hide(); //oculto mediante id
$('#rege').hide(); //oculto mediante id
}
function dance() {
$('#dance').show(); //muestro mediante id
$('#retro').hide(); //oculto mediante id
$('#rock').hide(); //oculto mediante id
$('#rege').hide(); //oculto mediante id
}
function rege() {
$('#rege').show(); //muestro mediante id
$('#retro').hide(); //oculto mediante id
$('#rock').hide(); //oculto mediante id
$('#dance').hide(); //oculto mediante id
}
</script>
</head>
<body style="margin:0px">
<div class="menu">
<a href="javascript:retro();" style="margin-top:5px;" class="tools">
<img class="icon trash" width="42" height="42" src="img/retro.png">
</a>
<a href="javascript:rock();" style="margin-top:6px;" class="tools">
<img class="icon pen" width="42" height="42" src="img/rock.png">
</a>
<a href="javascript:dance();" style="margin-top:6px;" class="tools">
<img class="icon help" width="42" height="42" src="img/dance.png">
</a>
<a href="javascript:rege();" style="margin-top:6px;" class="tools">
<img class="icon help" width="42" height="42" src="img/regeton.png">
</a>
</div>
<div id="retro" class="fondo-header-retro">
<div class="homeAudio" align="center">
<video controls="" autoplay="" name="media">
<source src="https://music/retro" type="audio/mpeg">
</video>
</div>
</div>
<div id="rock" class="fondo-header-rock" style="display:none;">
<div class="homeAudio" align="center">
<video controls="" autoplay="" name="media">
<source src="https://music/rock" type="audio/mpeg">
</video>
</div>
</div>
<div id="dance" class="fondo-header-dance" style="display:none;">
<div class="homeAudio" align="center">
<video controls="" autoplay="" name="media">
<source src="https://music/dance" type="audio/mpeg">
</video>
</div>
</div>
<div id="rege" class="fondo-header-rega" style="display:none;">
<div class="homeAudio" align="center">
<video controls="" autoplay="" name="media">
<source src="https://music/rege" type="audio/mpeg">
</video>
</div>
</div>
</body>
<chatgpt-sidebar data-gpts-theme="light"></chatgpt-sidebar>
<chatgpt-sidebar-popups data-gpts-theme="light"></chatgpt-sidebar-popups>
</html>
PD: El tema es que me tiene q aparecer por defecto Retro, y al seleccionar las demas musicas, ocultar las que no van y mostrar la que va. El codigo no me lo hace, algueoin sabe como hacerlo??? Gracias