CODEWITHSUNDEEP
csshtmlbootstrap-4
harry
harry

Reputation: 53

changing background image when clicked a li of nav in css

I want to change the background color of this nav when active/clicked, how can I achieve this? using css

    <div class="row container-fluid mainTabCon" 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>

help is appreciated

Upvotes: 0

Views: 271

Answers (1)

jtrcarlos
jtrcarlos

Reputation: 46

Add this script to the end of the body or your script file: (taken from w3 schools and adjusted to you)

// Get the container element
var btnContainer = document.getElementById("myDiv");

// Get all buttons with class="btn" inside the container
var lis = btnContainer.getElementsByClassName("nav-link");

// Loop through the buttons and add 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 just style the .active class:

.active {
    background-color: blue;
}

Full page with code described:

 <!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>
    // Get the container element
    var btnContainer = document.getElementById("myDiv");

    // Get all buttons with class="btn" inside the container
    var lis = btnContainer.getElementsByClassName("nav-link");

    // Loop through the buttons and add 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>

After some discussion with other users, are you referring to Bootstrap's js libraries? If not, add them to the end of the body and ignore the code above to see if it works.

<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>

Upvotes: 1

Related Questions