espero que se encuentren bien, estoy en un proyecto con angular trabajando con fundation, necesito implementar pestañas (tabs) para mostrar tablas diferentes, al implementarlo con fundation me funciona bien, pero se me desconfiguran los colores, pude arreglar eso utilizando jquery y css, pero mi único problema, es cuando inicia la aplicación, las pestañas se ven por el color predeterminado, en mi caso trasparente, recién al hacer click se activa el color de la pestaña (azul claro, color de la entidad) y cuando le doy click a otra pestaña, van alternando el color, eso está muy bien, pero necesito que al iniciar la aplicación, se active con el color la primera pestaña sin necesidad de hacer un click, con el fin de indicar al usuario que cuando entra al sistema, se inicia y está posicionado en la primera pestaña.

Espero que me puedan ayudar, estoy iniciando en el rubro de la programación y quizás esto sea básico, pero si alguien me puede orientar, estaré eternamente agradecido.

CSS

    #main > ul > li a:hover {
    background: #018FDC;
    background: -moz-linear-gradient(#2E779A 0%, #2E779A 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2E779A), color-stop(100%, #2E779A));
    background: -webkit-linear-gradient(#2E779A 0%, #2E779A 100%);
    background: #CFCFCF 100%;
    color: black;
}

#main > ul > li {
  background-color: transparent; 
  border: 1px solid #d0d0d0; 
}


#main > ul {
  background-color: transparent;
  position: relative;left: -10px; 
}

#main > ul > li > a.selectTab {
background-color: #018FDC;
color: #ffffff;

}

#main > ul > li > a {
        font-size: 13px;
        display: block;
        color: #2E779A;
        border: 1px solid #ececec;
        border-top: none;
        text-shadow: 0 -1px 1px #ececec;
        
    }

HTML

<div  *ngIf="!selectTab()">
<div id="main">
<ul  data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="1000" data-tabs id="deeplinked-tabs">
    <li >
    <a href="#Altas" aria-selected="true">Altas Hospitalarias</a></li>
    <li ><a href="#Cuentas">Cuentas Hospitalarias</a></li>
  </ul>
</div>

Jquery

 public selectTab(): any {
$(function() {
  $("#main ul li a").click(function() {
    $("#main ul li a").removeClass("selectTab");
    $(this).addClass("selectTab");
  });
});

CodePudding user response：