Tengo un menú con 3 opciones y necesitaría que dependiendo del botón que pulse salgan diferentes contenidos y que si estoy viendo el contenido del div
asociado al botón a y pulso el botón b se me muestre el contenido asociado al botón b y se oculte el del botón a.
div1: "elim"
div2: "rank"
div3: "clas"
¿Cómo podría hacerlo?
He probado o siguiente pero no funciona:
function muestra_oculta1(id){
var a = document.getElementById('clas');
var b = document.getElementById('elim');
var c = document.getElementById('rank');
if (document.getElementById){ // Se obtiene el id
// Se define la variable "el" igual a nuestro div
var el = document.getElementById(id);
// Damos un atributo display:none que oculta el div
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
a.style.display = (a.style.display == 'none') ? 'block' : 'none';
b.style.display = (a.style.display == 'none') ? 'block' : 'none';
c.style.display = (a.style.display == 'none') ? 'block' : 'none';
}
}
window.onload = function(){
muestra_oculta('elim');
muestra_oculta('rank');
muestra_oculta('clas');
}
<ul class="actions fit small">
<li><a style='cursor: pointer;' onClick="muestra_oculta('clas')" class="button fit">Clasificación</a></li>
<li><a style='cursor: pointer;' onClick="muestra_oculta('elim')" class="button fit">Eliminatorias</a></li>
<li><a style='cursor: pointer;' onClick="muestra_oculta('rank')" class="button fit">Ranking Final</a></li>
</ul>
<div id="clas">
<header class="align-center">
<h2>Clasificacion</h2>
</header>
</div>
<div id="elim">
<header class="align-center">
<h2>Eliminatorias</h2>
</header>
</div>
<div id="rank">
<header class="align-center">
<h2>Ranking Final</h2>
</header>
</div>