Skip to main content
2 de 3
se eliminaron 61 caracteres en el cuerpo

Añadir URL en tab menu

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!

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa (PD:he teneido que poner todas estas "a" porque sino no me dejaba publicar)