1

Alguien me puede ayudar con js?? Necesito que al escribir la url en cuestión se me abra el tab sin tener que hacer el click en el tab. Algo asi (ejemplo: midominio.com/index.php#tab2 en este caso al escribir la ruta del tab 2 se me muestre el tab2) actualmente solo se me muestra si solo clico en el tab. Dejo aqui mi codigo...

<div class="tab mt-2">
    <button class="tablinks active" onclick="tabMenu(event, 'tab1'); window.location='#tab1';">Tab Menu 1</button>
    <button class="tablinks" onclick="tabMenu(event, 'tab2'); window.location='#tab2';">Tab Menu 2</button>
</div>


    
<div id="tab1" style="display: block;" class="tabcontent">
    <h3>ver contenido Tab 1</h3>
</div>

<div id="tab2" style="display: none;" class="tabcontent">
    <h3>ver contenido Tab 2</h3>
</div>

<style>         
.tab {
  overflow: hidden;         
  background-color: #f2efef;
  border-radius: 5px;
  border: 1px solid rgb(154, 215, 255);
  
  
}

.tab button {  
  float: left; 
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


.tab button:hover {
  background-color: rgb(18, 118, 240);
  color: white;
}


.tab button.active {
  background-color: rgb(18, 118, 240);
  color:white;
}


.tabcontent {
  display: none;  
}

</style>

<script>
function tabMenu(evt, animalName) {
              let i, tabcontent, tablinks;
            
              // This is to clear the previous clicked content.
              tabcontent = document.getElementsByClassName("tabcontent");
              for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
              }
            
              // Set the tab to be "active".
              tablinks = document.getElementsByClassName("tablinks");
              for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
              }
              
            
              // Display the clicked tab and set it to active.
              document.getElementById(animalName).style.display = "block";
              evt.currentTarget.className += " active";
            }
            
</script>   

Gracias aprecio cualquier tipo de ayuda o sugerencia!

1
  • En el onload de la web comprueba si tu URL acaba con tabX, si es así podrías simplemente usar findById del tabX en cuestión y simular un click() en él y ya está :) Lo que menciono puedes encontrar ejemplos funcionando aquí en StackOverflow directamente.
    – Benito-B
    Commented el 25 jun. 2022 a las 9:52

1 respuesta 1

1
Mira esta manera de acerlo es muy similar

window.addEventListener('hashchange',(ev) => {
  const url = ev.newURL.split('#')[1]
  const prevUrl = ev.oldURL.split('#')[1] || 'tab1'

  document.getElementById('to'+url).classList.add('active')
  document.getElementById(url).style.display = "block";
  if(!prevUrl) return;
  document.getElementById('to'+prevUrl).classList.remove('active')
  document.getElementById(prevUrl).style.display = "none";
});

window.onload = function (ev) {
  var hash = window.location.hash.substring(1) || 'tab1'; 
  document.getElementById('to'+hash).classList.add('active')
  document.getElementById(hash).style.display = "block";
}
.tab {
  overflow: hidden;         
  background-color: #f2efef;
  border-radius: 5px;
  border: 1px solid rgb(154, 215, 255);
  
  
}

.tab a {  
  float: left; 
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


.tab a:hover {
  background-color: rgb(18, 118, 240);
  color: white;
}


.tab a.active {
  background-color: rgb(18, 118, 240);
  color:white;
}


.tabcontent {
  display: none;  
}
    <div class="tab mt-2">
        <a class="tablinks" href="#tab1" id="totab1">Tab Menu 1</a>
        <a class="tablinks" href="#tab2" id="totab2">Tab Menu 2</a>
    </div>
    
    
        
    <div id="tab1" style="display: none;" class="tabcontent">
        <h3>ver contenido Tab 1</h3>
    </div>
    
    <div id="tab2" style="display: none;" class="tabcontent">
        <h3>ver contenido Tab 2</h3>
    </div>

5
  • No olvides editar tu respuesta y explicar qué hace este código.
    – padaleiana
    Commented el 25 jun. 2022 a las 12:26
  • Me sirvió fenómeno!!!! ;)
    – BOLIBICK
    Commented el 25 jun. 2022 a las 12:32
  • Si copio y pego la ruta midominio.com/index.php#tab2 no funciona. Tiene que ejcutarse primero el tab1 para que funcione? hay alguna manera de solucionar eso?
    – BOLIBICK
    Commented el 25 jun. 2022 a las 12:48
  • a tu etiqueta <script> agregale defer <script defer>
    – Salazar
    Commented el 25 jun. 2022 a las 13:11
  • ya funcionaba de antes compañero! tenia un display: block en tab1 en vez de display: none.. muchas gracias por su ayuda ;)
    – BOLIBICK
    Commented el 25 jun. 2022 a las 13:45

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.