2

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>

0

3 respuestas 3

1

Con puro HTML + CSS puedes usar in input radio/check con la propiedad CSS :checked.

label{
  display:inline-block;
  background:#ccc;
  line-height:36px;
  padding: 0 10px;
  cursor:pointer;
}
div{
  padding:10px 0
}
div div{
  display:none
}
input{display:none}
input:checked+label+div{
  display:block;
}
<div>
  <input type="radio" name="tabs[]" id="tab1" checked>
  <label for="tab1">Tab #1</label>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur velit quos sequi, repellendus dolorum ratione necessitatibus laboriosam illum, id itaque!</div></div>
<div>
  <input type="radio" name="tabs[]" id="tab2">
  <label for="tab2">Tab #2</label>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quae aspernatur sapiente sed quidem suscipit dolorum quas ex ratione molestias.</div>
</div>
<div>
  <input type="radio" name="tabs[]" id="tab3">
  <label for="tab3">Tab #3</label>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam architecto repudiandae fuga tenetur repellat sed numquam cupiditate eum, aperiam facere.</div>
</div>
<div>
  <input type="radio" name="tabs[]" id="tab4">
  <label for="tab4">Tab #4</label>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores architecto omnis voluptate, in aliquid illo exercitationem maiores corrupti velit eveniet.</div>
</div>

Con JavaScript:

const btns = document.querySelectorAll('.btn');

if(btns){
	btns.forEach(item => {
  	item.addEventListener('click', function(event){
    	let id = event.target.getAttribute('data-id');
      if(id){
      	document.querySelector('.active').classList.remove('active');
      	document.getElementById(id).classList.add('active');
      }
    })
  })
}
.btn{
  display:inline-block;
  background:#ccc;
  line-height:36px;
  padding: 0 10px;
  cursor:pointer;
}
div{
  display:none
}
div.active{
  display:block
}
<span class="btn" data-id="tab-1">Tab #1</span>
<span class="btn">Tab #2</span>
<span class="btn" data-id="tab-3">Tab #3</span>
<span class="btn" data-id="tab-4">Tab #4</span>

<div id="tab-1" class="active">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur atque ut aliquid. Ipsam tenetur vero laborum, fugiat vel rerum quo.</div>
<div id="tab-2">Minus similique consequatur modi aperiam ullam ad veritatis quibusdam in velit quidem, illum cumque laborum debitis, ut voluptatibus distinctio, accusamus.</div>
<div id="tab-3">Eos natus nesciunt commodi quibusdam, doloremque pariatur earum, dolorum tempore, facere nobis accusamus animi. Impedit tempore fugit repellendus officia provident.</div>
<div id="tab-4">Consequuntur illo earum, nisi omnis expedita vitae ullam assumenda sapiente dolore ipsa cum reiciendis rem, qui dolores facilis ad quas!</div>

Nota: En este segundo snippet no está data-id="tab-2", no falta, lo retiré intencionalmente para mostrar que no pasa nada, ningún error, si por X razón lo retiras.

0
0

Te dejo un ejemplo bastante simple:

// Mostrar y ocultar listado de planes de financiación
var element = document.getElementById("oldNews");
if(element != null){
	element.style.display = "none";
}
var element = document.getElementById("old2");
if(element != null){
	element.style.display = "none";
}

function showHide(elementId) {
	var element = document.getElementById(elementId);
	if (element != null) {
		if(element.style.display != "none"){
			element.style.display = "none";
		}else{
			element.style.display = "block";
		}
	}
}
<input href="#oldNews" type=button class="pull-right btn btn-primary" value="Mostrar tabla 1 / Ocultar tabla 1" onclick="showHide('oldNews')"></br>
<input href="#oldNews" type=button class="pull-right btn btn-primary" value="Mostrar tabla 2 / Ocultar tabla 2" onclick="showHide('old2')"></br>

<table class="table table-striped" id="oldNews">
  <thead>

    <tr>
      <th scope="col">Tabla 1</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>


<table class="table table-striped" id="old2">
  <thead>

    <tr>
      <th scope="col">Tabla 2</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

5
  • Buenas, pero si necesito tener 2 botones más y que pulsando el segundo se me muestre el div asociado a este y se oculte el del primero como puedo hacerlo? el 13 feb. 2020 a las 18:19
  • Ahí modifique el código, seria algo así. el 13 feb. 2020 a las 18:29
  • Así consigo que salgan los demás, pero al pulsar otro no se oculta el que esta siendo mostrado, simplemente los muestra todos el 13 feb. 2020 a las 18:39
  • Tendrías que jugar con eso. Las herramientas que te van a servir son las que te pase, lo demás es ir jugando el 13 feb. 2020 a las 18:49
  • Lo ideal sería explicar el código para que sea una mejor respuesta.
    – user13558
    el 15 feb. 2020 a las 20:08
0

Puedes crear una función en JS que se dedique a hacer el show/hide, y lo único que tendrías que hacer sería atribuir esa función en donde tienes los botones que se encargan de generar esa acción, te enseño como lo hice en una ocasión:

                    <button class="open-sub-menu" onclick="submenuToggle('btnOne')">+</button>
                        <div class="quick-access" id="btnOne">
                            <a href="add_group.php">Registrar</a>
                            <a href="admin_panel_groups.php">Consultar</a>
                        </div>

                    <button class="open-sub-menu" onclick="submenuToggle('btnTwo')">+</button>
                        <div class="quick-access" id="btnTwo">
                            <a href="add_distrito.php">Registrar</a>
                            <a href="admin_panel_distritos.php">Consultar</a>
                        </div>

Si te das cuenta ambos tienen un id diferente y la manera que procedí fue que le incluí el nombre de la función que realize en JS junto con el nombre del id asignado a cada botón, esta es mi función, se encarga de mostrar o esconder elementos:

        function submenuToggle(divid) {
            var submenu = document.getElementById(divid);
            if( submenu.style.display === "none") {
                submenu.style.display = "block";
            } else {
                submenu.style.display = "none";
            }
        }

Lo que pasa aquí es que no incluyes atributo a la función, en este caso se le incluye los tags de HTML, espero te ayude saludos.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.