Estoy trabajando con tabs sobre mi proyecto, el tab lo construyo asi:
<div class="tab-container">
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" id="unidadrecaudadora" href="#DatosUR" role="tab">Datos Unidad Recaudadora</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" id="encargdo" href="#Encargados">Encargados</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" id="datostransfe" href="#DatosTrans" role="tab">Datos Transferencia</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" id="aporte" href="#AportParr" role="tab">Aporte Parroquial</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade show" id="DatosUR" role="tabpanel">
@include('modulos.procesos.unidad_recaudadora.includes.DatosUR')
</div>
<div class="tab-pane fade" id="Encargados" role="tabpanel">
@include('modulos.procesos.unidad_recaudadora.includes.Encargados')
</div>
<div class="tab-pane fade" id="DatosTrans" role="tabpanel">
@include('modulos.procesos.unidad_recaudadora.includes.DatosTransf')
</div>
<div class="tab-pane fade" id="AportParr" role="tabpanel">
@include('modulos.procesos.unidad_recaudadora.includes.AportParr')
</div>
</div>
</div>
y la manera en la que estoy validando el cambio es con js de momento es asi:
$('#encargdo').click(function (event) {
if($('#btnactualizar').attr('disabled') != 'disabled'){
var mensaje = confirm('los cambios no se han guardado, ¿Desea Continuar?');
if (!mensaje) {
}
}
})
lo que estoy haciendo es que en la pantalla de unidad recaudadora al momento de editar se habilita el boton actualizar, que es lo que se valida en js al momento de realizar cambio de tab si es cancelar devuelve false y no se debe realizar el cambio de tab si no mantener en el actual,
mi problema es que no se como hacerlo no soy experto en js y usando preventdefault() no me esta funcionando o no lo estoy aplicando bien