2

Estoy trabajando con tabs en mi pagina web, busco que al cargar mi pagina muestre el tab seleccionado, lo que logre fue que el tab quede seleccionado sin embargo no me muestra la información que tiene espero y me puedan apoyar, basicamente lo que busco es que al cargar mi pagina muestre la información del tab seleccionado

 var actualMonth = new Date().getMonth();
        var monthLink = document.getElementById("mes" + actualMonth);
        monthLink.classList.add("active");    


<!-- begin snippet: js hide: false console: true babel: false -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body style="background: rgba(157, 159, 165, 0.11)">
  <div class="profile-tabs">
    <ul class="nav nav-pills nav-pills-icons justify-content-center" role="tablist">
      <li class="nav-item">
        <a id="mes0" class="nav-link" href="#enero" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Enero
        </a>
      </li>
      <li class="nav-item">
        <a id="mes1" class="nav-link" href="#febrero" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Febrero
        </a>
      </li>
      <li class="nav-item">
        <a id="mes2" class="nav-link" href="#marzo" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Marzo
        </a>
      </li>
      <li class="nav-item">
        <a id="mes3" class="nav-link" href="#abril" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Abril
        </a>
      </li>
      <li class="nav-item">
        <a id="mes4" class="nav-link" href="#mayo" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Mayo
        </a>
      </li>
      <li class="nav-item">
        <a id="mes5" class="nav-link" href="#junio" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Junio
        </a>
      </li>
      <li class="nav-item">
        <a id="mes6" class="nav-link" href="#julio" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Julio
        </a>
      </li>
      <li class="nav-item">
        <a id="mes7" class="nav-link" href="#agosto" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Agosto
        </a>
      </li>
      <li class="nav-item">
        <a id="mes8" class="nav-link" href="#septiembre" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Septiembre
        </a>
      </li>
      <li class="nav-item">
        <a id="mes9" class="nav-link" href="#octubre" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Octubre
        </a>
      </li>
      <li class="nav-item">
        <a id="mes10" class="nav-link" href="#noviembre" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Noviembre
        </a>
      </li>
      <li class="nav-item">
        <a id="mes11" class="nav-link" href="#diciembre" role="tab" data-toggle="tab">
          <i class="material-icons">calendar_today</i> Diciembre
        </a>
      </li>
    </ul>
  </div>

</body>

</html>

.................................................................................................................................................................................................................................

1
  • 1
    Buenas, deberias añadir mas código para poder ver el error, sobre todo el codigo css y js
    – KeTeMeTo
    Commented el 1 oct. 2019 a las 16:04

1 respuesta 1

1

tu pregunta carece de código, te dejo un ejemplo de como crear tabs

Prueba este Snippet:

function openTab(evt, numeroTab) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(numeroTab).style.display = "block";
  evt.currentTarget.className += " active";
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #FA8D8D;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #FEB8B8;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #FEB8B8;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'uno')">TAB 1</button>
  <button class="tablinks" onclick="openTab(event, 'dos')">TAB 2</button>
  <button class="tablinks" onclick="openTab(event, 'tres')">TAB 3</button>
</div>

<div id="uno" class="tabcontent">
  <h3>Tab 1</h3>
  <p>informacion tab 1.</p>
</div>

<div id="dos" class="tabcontent">
  <h3>Tab 2</h3>
  <p>informacion tab 2</p> 
</div>

<div id="tres" class="tabcontent">
  <h3>Tab 3</h3>
  <p>informacion tab 3</p>
</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.