0

El motivo de mi pregunta es como es posible mostrar solamente un elemento de body con javascript. Se que para ocultar un elemento es posible con:

document.getElementsByClassName('ClassName')[0].style.display='none'

¿Cómo es posible en vez de ir ocultando todos los elementos mostrar solamente uno?

Saludos.

1
  • Tenemos muchos contenedores en el documento html, yo solo quiero mostrar uno de ellos y ocultar los demás. En vez de ir ocultando con el código que escribí todos, quizás halla una forma de mostrar solo uno. con display block muestra todos. Commented el 2 nov. 2020 a las 17:56

2 respuestas 2

0

Tu pregunta es muy amplia y puede abordarse de diferente manera, para que utilizar Javascript cuando eso lo puedes realizar con CSS te muestro un ejemplo:

1.- Tenemos un div con la clase contenedores y dentro hay varios contenedores

<div class="contenedores">
    <div class="contenedor1">
      SOY EL CONTENEDOR 1
    </div>

    <div class="contenedor2">
      SOY EL CONTENEDOR 2
    </div>

    <div class="contenedor3">
      SOY EL CONTENEDOR 3
    </div>

    <div class="contenedor4">
      SOY EL CONTENEDOR 4
    </div>

    <div class="contenedor5">
      SOY EL CONTENEDOR 5
    </div>

    <div class="contenedor5">
      SOY EL CONTENEDOR 5
    </div>
  </div>

2.- Con CSS ocultamos todos de la siguiente manera:

.contenedores > div {
  display: none;
}

3.- Estamos diciendo que todos los divs que hay dentro del elemento con la clase contenedores se oculten

4.- Ahora solo puedes mostrar el que tu desees de la siguiente manera:

.contenedores :nth-child(2) {
  display: block;
}

5.- Estamos diciendo que el "hijo" numero 2 del elemento contenedores se mostrará.

Ejemplo practico de lo anterior planteado:

.contenedores > div {
  display: none;
}

.contenedores :nth-child(2) {
  display: block;
}
<div class="contenedores">
    <div class="contenedor1">
      SOY EL CONTENEDOR 1
    </div>

    <div class="contenedor2">
      SOY EL CONTENEDOR 2
    </div>

    <div class="contenedor3">
      SOY EL CONTENEDOR 3
    </div>

    <div class="contenedor4">
      SOY EL CONTENEDOR 4
    </div>

    <div class="contenedor5">
      SOY EL CONTENEDOR 5
    </div>

    <div class="contenedor5">
      SOY EL CONTENEDOR 5
    </div>
  </div>

6.- **Si lo deseas realizar con JavaScript

// ACCEDEMOS A TODOS LOS CONTENEDORES

let contenedores = document.querySelectorAll(".contenedores>div");

// querySelectorAll NOS DEVUELVE UNA LISTA DE NODOS DE TODOS ESOS CONTENEDORES

// RECORREMOS ESA LISTA Y OCULTAMOS TODOS LOS CONTENEDORES

contenedores.forEach((contenedor) => {
  contenedor.style.display = "none";
});

//AHORA SOLO MOSTRAMOS EL CONTENEDOR DESEADO

document.querySelector(".contenedores :nth-child(2)").style.display = "block";

7.- Ejemplo practico con lo anterior planteado:

// ACCEDEMOS A TODOS LOS CONTENEDORES

let contenedores = document.querySelectorAll(".contenedores>div");

// querySelectorAll NOS DEVUELVE UNA LISTA DE NODOS DE TODOS ESOS CONTENEDORES

// RECORREMOS ESA LISTA Y OCULTAMOS TODOS LOS CONTENEDORES

contenedores.forEach((contenedor) => {
  contenedor.style.display = "none";
});

//AHORA SOLO MOSTRAMOS EL CONTENEDOR DESEADO

document.querySelector(".contenedores :nth-child(2)").style.display = "block";
<div class="contenedores">
    <div class="contenedor1">
      SOY EL CONTENEDOR 1
    </div>

    <div class="contenedor2">
      SOY EL CONTENEDOR 2
    </div>

    <div class="contenedor3">
      SOY EL CONTENEDOR 3
    </div>

    <div class="contenedor4">
      SOY EL CONTENEDOR 4
    </div>

    <div class="contenedor5">
      SOY EL CONTENEDOR 5
    </div>

    <div class="contenedor5">
      SOY EL CONTENEDOR 5
    </div>
  </div>

NOTA: TE DEJO UNOS ENLACES QUE PODRIAN INTERESARTE:

Document.querySelector()

Document.querySelectorAll()

0

No necesitas recorrerlos todos, basta con que estén ocultos desde el inicio, excepto uno; dentro de una función ocultas el que esté visible y muestras el seleccionado.

En esta propuesta incluí dos opciones:

  1. Por select, donde envías el índice del elemento a mostrar
  2. Por botón, donde se muestra uno por uno en cada clic

// Obtener todos los elementos a mostrar / ocultar
let divs = document.querySelectorAll('.clase');
// Cuál se debe mostrar
let activo = 0;

// Llenar div con opciones
let sel = document.querySelector('#selactivo');
divs.forEach(div => {
    let opt = document.createElement('option');
    opt.text = div.innerText;
    sel.add(opt);
});

// Definir función para ocultar activo y mostrar seleccionado
function cambiar(mostrar) {
    // Primero ocultar el que está activo
    divs[activo].style.display = 'none';
    // Mostrar el que se proporcionó por parámetro
    divs[mostrar].style.display = 'block';
    // Actualizar variable para marcar activo
    activo = mostrar;
}

// Mostrar por select, enviando índice
sel.addEventListener('change', e => cambiar(sel.selectedIndex));

// Ciclo con botón
document.querySelector('#siguiente').addEventListener('click', e => {
    // Incrementar
    mostrar = activo + 1;
    // Si es después del último, volver al inicio
    if(mostrar == divs.length) {
        mostrar = 0;
    }
    // Mostrar el que corresponde
    cambiar(mostrar);
    // Actualizar select
    sel.value = divs[activo].innerText;
});
.clase { display:none; }
<div class="clase" style="display:block;">Div 1</div>
<div class="clase">Div 2</div>
<div class="clase">Div 3</div>
<div class="clase">Div 4</div>
Selecciona: <select id="selactivo"></select><br>
<button id="siguiente">Mostrar siguiente</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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