Tengo una grilla común basada en la documentación de Bootstrap. Lo que quiero es que dependiendo del día, se muestre de manera automática la pestaña activa del día y su contenido,cuando cargue la página. Por ejemplo, si es martes, el usuario al ingresar a la web verá activa la pestaña martes y su contenido correspondiente. Si es miércoles lo mismo, y así para todos los días. El usuario también debe poder ver los contenidos de las demás pestañas independientemente del día que sea. Aquí dejo link de lo que quiero lograr https://elektronaradio.com/programacion. Ver grilla en la parte inferior para ver su funcionamiento.
Un usuario llamado @juan facilitó un código en javascript que permite señalar el día corriente en el que se encuentre el usuario. Sólo faltaría el último paso que es mostrar el contenido automáticamente de esa pestaña activa. En este caso solo muestra la pestaña activa con éste código pero sin 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].classList.add('active');
weekDays[i].children[0].classList.add('active');
console.log( weekDays[i].children[0]);
}
}
}
<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="Monday" 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-->
<br />
<div class="card-group">
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/MMv8qjZ/TECHNO.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
TECHNO</h5>
<div class="card-text">
10 am- 12 pm / 23 pm- 01:30 am</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/njXsd7H/trance.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
TRANCE</h5>
<div class="card-text">
12 pm- 2 pm / 18 pm- 19:30 pm</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/QYbpZtz/HENRY-CINCO-664x400.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
PROGRESSIVE/HOUSE</h5>
<div class="card-text">
2 pm- 18 pm / 19:30 pm- 22 pm</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<!---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-->
<br />
<div class="card-group">
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/4fRmb4G/TECHNO11.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
TECHNO</h5>
<div class="card-text">
10 am- 12 pm / 23 pm- 01:30 am</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/q5jC23k/TRANCE2.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
TRANCE</h5>
<div class="card-text">
12 pm- 2 pm / 18 pm- 19:30 pm</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/W0g8kh1/HOUSE2.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
PROGRESSIVE/HOUSE</h5>
<div class="card-text">
2 pm- 18 pm / 19:30 pm- 22 pm</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<!---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-->
<br />
<div class="card-group">
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/Sd7KxYk/TECHNO3.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
TECHNO</h5>
<div class="card-text">
10 am- 12 pm / 23 pm- 01:30 am</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/0fFg6QD/TRANCE3.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
TRANCE</h5>
<div class="card-text">
12 pm- 2 pm / 18 pm- 19:30 pm</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/gmykRRz/PROGRESSIVE.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
PROGRESSIVE/HOUSE</h5>
<div class="card-text">
2 pm- 18 pm / 19:30 pm- 22 pm</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<!---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-->
<br />
<div class="card-group">
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/f8ZND9H/TECHNO444.png" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
TECHNO</h5>
<div class="card-text">
10 am- 12 pm / 23 pm- 01:30 am</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/Wgxkjn2/BIAgrilla2.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
SOLSTICE by Bia</h5>
<div class="card-text">
22 hs argTime</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/PrqYvd1/rain8grilla.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
NONSTOP-KLAUDIO RAIN</h5>
<div class="card-text">
23 pm</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<!---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-->
<br />
<div class="card-group">
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/pwDyWvm/onlytechno-featured.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
UNDERGROUND</h5>
<div class="card-text">
20 PM - 21 PM / 02 AM - 3:30 AM</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/Hn90ys1/djpaulrradio-PORTADAAA.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
DJ PAUL</h5>
<div class="card-text">
22 PM</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/5k6rtpG/SOLVAS22.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
CLAUDIO SOLVAS</h5>
<div class="card-text">
23 HS PM </div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<!---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-->
<br />
<div class="card-group">
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/PF2wXHV/flurinx2.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
PABLO FLURIN</h5>
<div class="card-text">
22 hs pm</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/NrKSn1D/flowing.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
EMI GALVÁN-FLOWING</h5>
<div class="card-text">
23:30 PM - 12:30 AM</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/f1MBhkV/MARIANOPROGRAMA.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
GLOBAL RADIO SHOW</h5>
<div class="card-text">
12:30 AM (Dom)</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<!---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-->
<br />
<div class="card-group">
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/f1MBhkV/MARIANOPROGRAMA.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
GLOBAL RADIO SHOW</h5>
<div class="card-text">
12:30 AM</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/85WkpXT/derekkks225grilla2.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
VISIONS-DEREK</h5>
<div class="card-text">
21 HS PM</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img alt="..." card-img-top="" src="https://i.ibb.co/2YVw2XH/onlytechno-featured.jpg" style="width: 100%;" />
<br />
<div class="card-body">
<h5 class="card-title">
UNDERGROUND</h5>
<div class="card-text">
22:00 HS PM</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<!---TERMINACARD-->
</div>
</div>
</div>
</div>
</div>
</div>