Insert the following script at the end of your body section or script file:
(modified version of code from w3 schools)
// Locate the container element
var btnContainer = document.getElementById("myDiv");
// Find all buttons with class="btn" within the container
var lis = btnContainer.getElementsByClassName("nav-link");
// Iterate through the buttons and assign the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
Then proceed to customize the .active class:
.active {
background-color: blue;
}
Complete page layout with described code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
.active {
background-color: blue;
}
</style>
<body>
<div class="row container-fluid mainTabCon" id="myDiv" style="width: 100%" style="">
<ul class="nav nav-pills" style="margin: 0 auto; ">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
</li>
</ul>
</div>
<script>
// Locate the container element
var btnContainer = document.getElementById("myDiv");
// Find all buttons with class="btn" within the container
var lis = btnContainer.getElementsByClassName("nav-link");
// Iterate through the buttons and assign the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
If Bootstrap's js libraries are required, include them at the end of the body section and test without the above code to see if it functions properly.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>