Jquery - How to change background colour on nav bar element when it is active

SimonNorgrove
April 22, 2024
136 views
0 votes
2 Answers

Tried solving this first using online resources. Couldn’t manage to figure it out. Just looking to make nav bar background colour change when I click on it and it is active once the new page loads.

A couple solutions that made the most sense to me but I couldn’t figure out how to implement.

Javascript:

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

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

jQuery:

    <script>
        $(document).ready(function () {
            $('ul.navbar-nav > li').click(function (e) {
                $('ul.navbar-nav > li').css('background-color', 'transparent');
                $(this).css('background-color', '#c0c0c0');
            });
        });
    </script>

Here is my code

HTML:

<!DOCTYPE html>
<html>
    
    <head>
        <script type="text/javascript" src="website.js"></script>
        <link rel="stylesheet" type="text/css" href="css.css" />
        <title> Why So Serious </title>
    </head>
    <body>
        <header>
            <h1><span> Why So Serious</span></h1>
        </header>
    </body>
    <nav class="navbar">
        <ul>
            <li><a href="goodnews.html">Goodnews</a></li>
            <li><a href="sport.html">Sport</a></li>
            <li><a href="style.html">Style</a></li>
            <li><a href="forum.html">Forum</a></li>
        </ul>
    </nav>

    


</html>

CSS:

* {
    margin: 0;
    padding: 0;
  }


h1 {text-align: center;
    font-size: 600% ;
    font-style: itaic;
    background: #33ACFF ;
    min-width: 100%;
    margin: 0%;
    padding: 0%;

}

/* top nav bar style and location */
.navbar ul {
    list-style-type: none;
    padding: 0%;
    margin: 0%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid black;
}

/* top nav bar options styling */
.navbar a {
    color: black;
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
    text-transform: uppercase;
   
}

.navbar a:hover{
    background-color: black;
    color: white;

}

.navbar .active{
    background-color: black;
    color:white;
}
.navbar li{
    display: inline;
    
}

Answers

You need to keep track of which item is active. You can do this by setting an "active" class on an item when it’s clicked. You can do that by adding an event listener to each item.

const navItems = document.querySelectorAll('nav a')

navItems.forEach(item => {
  item.addEventListener('click', e => {
    item.classList.add('active')
  })
})

Once there’s an active class on an element, you can select and style it with css:

a.active {
  background-color: ...
}

Seeing as we’re adding the active class on click, we also need to be removing any previously added active classes. We can do this by creating a "clearActiveClass" function and calling it before we set the new active class.

function clearActiveClass () {
  navItems.forEach(item => {
    item.classList.remove('active')
  })
}

See snippet for example:

const navItems = document.querySelectorAll('nav a')

navItems.forEach(item => {
  item.addEventListener('click', e => {
    clearActiveClass()
    item.classList.add('active')
  })
})


function clearActiveClass () {
  navItems.forEach(item => {
    item.classList.remove('active')
  })
}

nav {
  background-color: #333;
  display: flex;
  justify-content: center;
}

a {
  color: #fff;
  display: block;
  padding: 5px 10px;
  text-decoration: none;
}

a:hover {
  background-color: rgba(255, 0, 0, 0.5);
}

a.active {
  background-color: rgba(255, 0, 0);
}

<nav>
  <a href="#" class="active">Home</a>
  <a href="#">About</a>
  <a href="#">FAQs</a>
  <a href="#">Contact</a>
</nav>

Firstly, in your HTML, you need to include the script tags for jQuery and your JavaScript file.
@nd point I’ve found is that you should place your navigation inside the tag, as is a part of the document body.

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css.css" />
    <title>Why So Serious</title>
</head>
<body>
    <header>
        <h1><span>Why So Serious</span></h1>
    </header>
    <nav class="navbar">
        <ul>
            <li><a href="goodnews.html">Goodnews</a></li>
            <li><a href="sport.html">Sport</a></li>
            <li><a href="style.html">Style</a></li>
            <li><a href="forum.html">Forum</a></li>
        </ul>
    </nav>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="website.js"></script>
</body>
</html>

Build a script based on adding an ‘active’ class to the link .

$(document).ready(function () {
    $('.navbar ul li a').click(function (e) {
        $('.navbar ul li a').removeClass('active');
        $(this).addClass('active');
    });
});

Additionally, style the link in the active position.

CSS:

* {
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    font-size: 600%;
    font-style: italic;
    background: #33ACFF;
    min-width: 100%;
    margin: 0%;
    padding: 0%;
}

.navbar ul {
    list-style-type: none;
    padding: 0%;
    margin: 0%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid black;
}

.navbar a {
    color: black;
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
    text-transform: uppercase;
}

.navbar a:hover {
    background-color: black;
    color: white;
}

.navbar a.active {
    background-color: black;
    color: white;
}

.navbar li {
    display: inline;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – How to change background colour on nav bar element when it is active

Answers