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>