Hola podrían sacarme de un problema de código, estoy trabajando un menú, pero, no logro mantener las pestañas fijas mientras se interactua con el contenido que despliega. :shock: :cry:

Aquí la muestra de como al hacer click en la pestañas, el color se mantiene:
Ver imagen: https://ibb.co/cByEod
Pero al comenzar a interactuar con el contenido se deselecciona:
Ver imagen: https://ibb.co/e4sqTd

Intenté de todo pero sin éxito, alguien podría ayudarme, por favor.
El código en HTML es el siguiente:

Código HTML :

<div bsModal #ContratoCaptura="bs-modal" [config]="{backdrop: 'static'}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
    aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <form id="actionForm" (ngSubmit)="onGuardar()" class="ng-pristine ng-valid">
                <div class="modal-header modal-header-style">
                    <h4 class="modal-title-aicos">
                        <strong>Agregar registro de contrato</strong>
                    </h4>
                    <button type="button" class="close" (click)="onCerrarModal()" aria-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-body">
                    <div class="smart-form widget-body">
                        <ul id="tabContenido" class="tabContenido">
                            <li class="active" id="inic">
                                <a href="#iniciativaTab" data-toggle="tab">
                                    {{'iniciativa' | i18n}}
                                    <em class="fa"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#ambitoTab" data-toggle="tab">
                                    {{'ambito_modalidad' | i18n}}
                                    <em class="fa"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#objetoTab" data-toggle="tab">
                                    Objeto del contrato
                                    <em class="fa"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#montosTab" data-toggle="tab">
                                    {{'montos' | i18n}}
                                    <em class="fa"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#pacmaTab" data-toggle="tab" *ngIf="model.aplicaPacma">
                                    {{'pacma' | i18n}}
                                    <em class="fa"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#ubicacionTab" data-toggle="tab">
                                    {{'ubicacion' | i18n}}
                                    <em class="fa"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#estrategicoTab" data-toggle="tab">
                                    {{'estrategico' | i18n}}
                                    <em class="fa"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#administracionTab" data-toggle="tab">
                                    {{'administracion' | i18n}}
                                    <em class="fa"></em>
                                </a>
                            </li>
                        </ul>


Traté de solucionarlo con un Jquary ó java que encontré, pero, no logré ajustarla...no se mucho de estas bibliotecas, pero, una sugerencia me ayudaría mucho:

Código Javascript :

<script>
$(function() {
  
  // elementos de la lista
  var menues = $(".nav li"); 

  // manejador de click sobre todos los elementos
  menues.click(function() {
     // eliminamos active de todos los elementos
     menues.removeClass("active");
     // activamos el elemento clicado.
     $(this).addClass("active");
  });

});

</script>



Código CSS :

#tabContenido {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
  
#tabContenido li {
    float: left;
    margin: 0 -10px 0 0;
}
  
#tabContenido a {
    float: left;
    position: relative;
    padding: 0 12px;
    height: 0; 
    line-height: 30px;
    /*/text-transform: uppercase;/*/
    text-decoration: none;
    color: #fff;
    border-left: 15px solid transparent;
    border-bottom: 30px solid #C0C0C0;
    border-bottom-color: #C0C0C0;
    border-top-right-radius: 2px;
    /*/opacity: .3;
    filter: alpha(opacity=30);/*/   
}
  
#tabContenido a:hover {
    border-bottom-color: #fb913b;
    opacity: .7;
    filter: alpha(opacity=30);
}
    

#tabContenido a:focus {
    border-bottom-color: #fb913b;
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 1 ;
}
 
/*/#tabContenido #current {
    z-index: 3;
    border-bottom-color: #3d3d3d;
    opacity: 1;
    filter: alpha(opacity=100);   
}/*/

.tabContenido {
    border-bottom: 4px solid #fb913b;
}

/*/ MANTENER PESTAÑAS ACTIVAS MIENTRAS SE NAVEGA /*/

/*/#inic a:visited {
    border-bottom-color: #c2185b;
}/*/

/*/#inic {
    background: red;
  }/*/


/*/#tabContenido li a:active {
    border-bottom-color: #c2185b;
}/*/


¿QUÍEN ME PUEDE AYUDAR PARA ENCONTRAR LA MEJOR ALTERNATIVA Y SOLUCIONARLO?. Gracias.