3

Hola cómo están? estoy en proceso de aprendizaje, y necesito hacer lo siguiente. Trabajo con bootstrap nav-tab para mostrar una programación de la semana de una radio. Requisito: El usuario al entrar a la web debe ver la pestaña activa del día corriente y su contenido. También puede seleccionar los otros días para ver su contenido.

Estoy usando el siguiente código, el cuál logra activar la pestaña del día corriente pero no logro mostrar su contenido.

Nosé si tiene que ver con los tab-pane que tengo en el html.

Ejemplo: Si es día Jueves, la grilla debe mostrar contenido de ese día, pero también el usuario debe tener libertad de elegir los otros días para ver su contenido.

var d5 = new Date();
var weekday = new Array(7);
weekday[0] =  "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var n5 = weekday[d5.getDay()];

var daysOfTheWeek = document.getElementsByTagName("li");

dayOfTheWeek(daysOfTheWeek);

function dayOfTheWeek (weekDays) {
    for(var i = 0; i < weekDays.length; i++)
  { 
  
    if(weekDays[i].getAttribute("name") == n5)
    {
        weekDays[i].className = 'active';
      weekDays[i].childNodes[0].className = 'active';
    }
  }
}
li.active
{
  color: red;
}

a.active
{
  color: red;
}
  
  
  nav nav-tabs.active
  {
  color: red;
}
<div class="container sinpadding">
<ul class="nav nav-tabs responsive" id="myTab" role="tablist">
<li name="Monday">
    <a   class="nav-link" data-toggle="tab" href="#resp-tab0" id="home-tab" role="tab">Lunes</a>
  </li>
<li name="Tuesday">
    <a   class="nav-link" data-toggle="tab" href="#resp-tab1" id="profile-tab" role="tab">Martes</a>
  </li>
<li name="Wednesday">
    <a  class="nav-link " data-toggle="tab" href="#resp-tab2" id="config-tab" role="tab">Miércoles</a>
  </li>
<li name="Thursday">
    <a   class="nav-link" data-toggle="tab" href="#resp-tab3" id="home-tab" role="tab">Jueves</a>
  </li>
<li name="Friday">
    <a   class="nav-link" data-toggle="tab" href="#resp-tab4" id="profile-tab" role="tab">Viernes</a>
  </li>
<li name="Saturday">
    <a   class="nav-link " data-toggle="tab" href="#resp-tab5" id="config-tab" role="tab">Sábado</a>
  </li>
<li name="Sunday">
    <a  class="nav-link" data-toggle="tab" href="#resp-tab6" id="config-tab" role="tab">Domingo</a>
  </li>
</ul>











<div class="tab-content" id="myTabContent">
<div aria-labelledby="lunes-tab" class="tab-pane fade" id="resp-tab0" role="tabpanel">
<div class="container sinpadding">
<div class="row">
<div class="col-sm">
<!---EMPIEZACARD-->

   contenido
<!---TERMINACARD-->


    </div>
</div>
</div>
</div>
<div aria-labelledby="martes-tab" class="tab-pane fade" id="resp-tab1" role="tabpanel">
<div class="container">
<div class="row">
<div class="col-sm">
<!---EMPIEZACARD-->
contenido
<!---TERMINACARD-->


    </div>
</div>
</div>
</div>
<div aria-labelledby="miércoles-tab" class="tab-pane fade" id="resp-tab2" role="tabpanel">
<div class="container sinpadding">
<div class="row">
<div class="col-sm">
  <!---EMPIEZACARD-->
contenido 
<!---TERMINACARD-->


    </div>
</div>
</div>
</div>
<div aria-labelledby="jueves-tab" class="tab-pane fade" id="resp-tab3" role="tabpanel">
<div class="container">
<div class="row">
<div class="col-sm">
<!---EMPIEZACARD-->
contenido
<!---TERMINACARD-->



    </div>
</div>
</div>
</div>
<div aria-labelledby="viernes-tab" class="tab-pane fade" id="resp-tab4" role="tabpanel">
<div class="container">
<div class="row">
<div class="col-sm">
<!---EMPIEZACARD-->
contenido
<!---TERMINACARD-->


    </div>
</div>
</div>
</div>
<div aria-labelledby="sábado-tab" class="tab-pane fade" id="resp-tab5" role="tabpanel">
<div class="container">
<div class="row">
<div class="col-sm">
<!---EMPIEZACARD-->
contenido
<!---TERMINACARD-->
    </div>
</div>
</div>
</div>
<div aria-labelledby="domingo-tab" class="tab-pane fade" id="resp-tab6" role="tabpanel">
<div class="container">
<div class="row">
<div class="col-sm">
<!---EMPIEZACARD-->
contenido
<!---TERMINACARD-->



    </div>
</div>
</div>
</div>
</div>
</div>

1 respuesta 1

0

Prueba a cambiar la forma de añadir clases y la lista de hijos de cada item del menú.
En lugar de dar un valor a className añádelo con el método add a classList, de esta forma no eliminas las clases que ya tiene el elemento.
En lugar de childNodes, usa children que te devuelve la colección HTML hijos de cada elemento.


function dayOfTheWeek(weekDays) {
  for (var i = 0; i < weekDays.length; i++) {
    if (weekDays[i].getAttribute("name") == n5) {
      weekDays[i].classList.add('active');
     weekDays[i].children[0].classList.add('active');
     console.log( weekDays[i].children[0]);
    }
  }
}
7
  • Muchas gracias, disculpa mi ignorancia, aún estoy aprendiendo, puse ese código y ahora me señala el día corriente, ahora lo único que me faltaria es mostrar el contenido de ese día, que paso sigo? el 20 ago. 2021 a las 5:49
  • Mira la documentación de Bootstrap, sigue los pasos y se logra rápido. Yo primero copiaría el ejemplo que te pone y luego ya modificas personalizar.
    – Juan
    el 20 ago. 2021 a las 11:56
  • si me guio de allí, basándome en la documentación, pero no logré lo que quiero hacer. En cuanto a una grilla normal si logré que funcione todo. Pero no pude aún mostrar contenido de la pestaña activada basado en el corriente día. Creería que eso se logra con javascript. Por eso acudí a esta web por ayuda. el 21 ago. 2021 a las 5:59
  • Resumiento: crea un bloque <div> para cada contenido (cada dia), los colocas con posicionamiento absoluto en un contenedor . Todos menos uno con display:none Asigna un evento click a cada tab, este evento pone en visible uno de los bloques de contenido. Esa es la idea. Pero es lo que hace Bootstrap, creo que no he entendido lo que quieres.
    – Juan
    el 21 ago. 2021 a las 11:18
  • Gracias, soy nuevo en esto y a veces lo que hago es con fallo y error, lo que funciona lo dejo, pero aún no tengo muchos conocimientos, como sería eso en código? lo que necesito es que por ejemplo hoy es día Sábado. El usuario al ingresar a la web, ve activa la pestaña sábado y el contenido de ese día. Lo que yo tengo hasta ahora es que la pestaña me muestra activa el día sábado pero no muestra nada, hay que hacer clic nuevamente en sábado para que muestre el contenido, lo ideal sería que ya por defecto muestre lo que hay el sábado. el 21 ago. 2021 a las 18:13

Tu Respuesta

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

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