1

Tengo un nav tab pills con los días de la semana. Mi intención es que según el día se seleccione el tab correspondiente. Para ello he utilizado la función date("w"); para extraer en formato numérico del 0 al 6 el día de la semana, siendo 0 el domingo. He guardado el valor en una variable $dia.

Mi pregunta es ¿cómo puedo hacer ahora que se active cada pestaña según el número del día? He probado hacer un if($dia == "1"){ echo "active"; }else{ } pero al colocarlo solo en el tab no me funciona. Sí que selecciona el tab correspondiente pero no muestra su contenido.

¿Hay alguna otra forma de hacerlo? Este es mi código y tengo dudas de dónde colocarlo. No pongo todos los días de la semana para no hacerlo largo.

<?php $dia = date("w"); ?>

<div class="bs-example bs-example-tabs" role="tabpanel" data-bs-example-id="togglable-tabs">
      <ul id="myTab" class="nav nav-pills nav-tabs-responsive justify-content-center" role="tablist">
        <li role="presentation" class="active">
          <a id="lunes-tab" class="active nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#lunes" aria-controls="home" aria-expanded="true">
            <span class="text">Lunes</span>
          </a>
        </li>
        <li role="presentation" class="next">
          <a role="tab" class="nav-link" id="martes-tab" data-bs-toggle="tab" data-bs-target="#martes" aria-controls="profile" aria-expanded="false">
            <span class="text">Martes</span>
          </a>
        </li>
        <li role="presentation">
          <a role="tab" class="nav-link" id="miercoles-tab" data-bs-toggle="tab" data-bs-target="#miercoles" aria-controls="profile1" aria-expanded="false">
            <span class="text">Miercoles</span>
          </a>
        </li>
      </ul>
      <div id="myTabContent" class="tab-content">
        <div role="tabpanel" class="tab-pane fade show active" id="lunes" aria-labelledby="home-tab">
        
      <p>Lunes p/>

        </div>
        <div role="tabpanel" class="tab-pane fade" id="martes" aria-labelledby="profile-tab">
          <p>
            Martes
          </p>        
        </div>
        <div role="tabpanel" class="tab-pane fade" id="miercoles" aria-labelledby="profile1-tab">
          <p>
            Miercoles
          </p>
        </div>
</div>

1 respuesta 1

0

Podrás hacer lo siguiente:

  • Cambiar el id de los tabs utilizando en número del día de la semana, empezando desde 0 para el Domingo al 6 para el Aábado.
    Ejemplo: tab-1 para el Lunes.

  • Usando el método getDay del contructor Date de Javascript obtenemos el número del día.

  • Con el método document.querySelector o document.getElementById buscamos el tab que corresponde al número del día de la semana.

  • Con el método new bootstrap.Tab obtenemos la instacia del tab de Bootstrap.

  • Finalmente sobre la instancia llamamos al método show() para activarla.

Ejemplo:

const day = (new Date()).getDay();
const triggerEl = document.querySelector(`#tab-${day}`);

if (triggerEl) {
  const bsTab = new bootstrap.Tab(triggerEl);
  bsTab.show();
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="bs-example bs-example-tabs" role="tabpanel" data-bs-example-id="togglable-tabs">
  <ul id="myTab" class="nav nav-pills nav-tabs-responsive justify-content-center" role="tablist">
    <li role="presentation" class="active">
      <a id="tab-1" class="active nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#lunes" aria-controls="home" aria-expanded="true">
        <span class="text">Lunes</span>
      </a>
    </li>
    <li role="presentation" class="next">
      <a id="tab-2" role="tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#martes" aria-controls="profile" aria-expanded="false">
        <span class="text">Martes</span>
      </a>
    </li>
    <li role="presentation">
      <a id="tab-3" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#miercoles" aria-controls="profile1" aria-expanded="false">
        <span class="text">Miercoles</span>
      </a>
    </li>
    <li role="presentation">
      <a id="tab-4" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#jueves" aria-controls="profile1" aria-expanded="false">
        <span class="text">Jueves</span>
      </a>
    </li>
    <li role="presentation">
      <a id="tab-5" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#viernes" aria-controls="profile1" aria-expanded="false">
        <span class="text">Viernes</span>
      </a>
    </li>
  </ul>
  <div id="myTabContent" class="tab-content">
    <div role="tabpanel" class="tab-pane fade show active" id="lunes" aria-labelledby="home-tab">
      <p>
        Lunes
      </p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="martes" aria-labelledby="profile-tab">
      <p>
        Martes
      </p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="miercoles" aria-labelledby="profile1-tab">
      <p>
        Miercoles
      </p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="jueves" aria-labelledby="profile1-tab">
      <p>
        Jueves
      </p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="viernes" aria-labelledby="profile1-tab">
      <p>
        Viernes
      </p>
    </div>
  </div>
</div>

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.