3

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>

6

3 respuestas 3

2
+50

La solución es llamar al componente "tab" sobre el a

Ejemplo:

dayOfTheWeek();
//
function dayOfTheWeek() {
  // Obtenemos el nombre del dia de la semana
  let weekday = new Date().toLocaleDateString('en', { weekday: 'long' });
  // Buscamos el li con el name de la semana
  let $li = $(`li[name="${weekday}"]`);
  // Motramos el tab
  $li.find('a').tab('show');
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<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>


Fuente:

Bootstrap 4.6 > Navs > Via Javascript

1
  • Excelente, es la solución a lo que buscaba, muchas gracias!!. Commented el 11 sept. 2021 a las 6:55
1

Deberías de ponerle un ID a cada LI de los días tal y como lo has hecho con la propiedad "name" y utilizar:

document.getElementById('id').scrollIntoView();

Esto que se ejecute en la función al terminar de cargar la pagina en el navegador. Lo que hará que te centre en esa sección.

2
  • Hola te agradezco, aún no lo probé,ya me funcionó una de las soluciones, pero no descarto que esta podría servir también. Gracias. Commented el 11 sept. 2021 a las 6:56
  • Para servirte compañero. Saludos Commented el 12 sept. 2021 a las 2:52
0

agrégale a cada href el día de la semana

<li name="Monday">
    <a   class="nav-link" data-toggle="tab" href="#monday" id="Monday" role="tab">Lunes</a>
</li>
<li name="Tuesday">
    <a   class="nav-link" data-toggle="tab" href="#tuesday" id="profile-tab" role="tab">Martes</a>
</li>
............

agrégale a cada id el día de la semana

<div aria-labelledby="miércoles-tab" class="tab-pane fade" id="monday" role="tabpanel">
<div class="container sinpadding">
.....................

<div aria-labelledby="miércoles-tab" class="tab-pane fade" id="tuesday" role="tabpanel">
<div class="container sinpadding">
.......................

cuando termine de cargar la web obtén el día y ejecuta la función de Bootstrap para cambiar el tab

<script>
window.addEventListener("load", function(){
    let week_days = ["#sunday", "#monday", (...)]
    const week_day = new Date().getDay();
    const week= week_days[week_day ];
    $('#myTab a[href=week]').tab('show')
});

Dato: No lo copies tal cual, lo escribí directo en la respuesta, pero esa la solución más fácil y corta, pero la documentación de Bootstrap plantea que

$('#myTab a[href="#id"]').tab('show')

es la manera de ejecutar manual los tab mediante js

Si utilizas algún framework o no se PHP puro..... ejemplo: Laravel ...

Puedes utilizar una variante más rápida y no necesitas de javascript,

<li name="Monday">
        <a   class="nav-link @if(date("w") == 0) active @endif" data-toggle="tab" href="#monday" id="Monday" role="tab">Lunes</a>
<li name="Tuesday">
        <a   class="nav-link @if(date("w") == 1) active @endif" data-toggle="tab" href="#tuesday" id="profile-tab" role="tab">Martes</a>
    </li>
********************************

<div aria-labelledby="miércoles-tab" class="tab-pane fade @if(date("w") == 0) active @endif" id="monday" role="tabpanel">
    <div class="container sinpadding">
    .....................
    
    <div aria-labelledby="miércoles-tab" class="tab-pane fade @if(date("w") == 1) active @endif" id="tuesday" role="tabpanel">
    <div class="container sinpadding">
    .......................
1
  • gracias por tu tiempo, no descarto que puede ser también correcta. Commented el 11 sept. 2021 a las 6:57

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.