I am working on a customized bar with 4 distinct parts. Each part corresponds to a different page on the website. I want each part of the bar to change color based on which page the user is currently browsing. For example, if the user is on page A, I want the background of the service-specificBar-tab to be red, and if they are on page B, I want it to be purple.
How can I achieve this functionality? Is there a way to change the color of the service-specificBar-tab without explicitly detecting the current page?
#gray {
background: #f9f9f9;
width: 100%;
height: 700px;
position: relative;
}
#service-specificBar-container {
position: relative;
top: 300px;
width: 100%;
padding: 25px 0;
}
#service-specificBar {
width: 100%;
height: 100px;
border: 1px solid black;
}
.service-specificBar-tab {
width: 25%;
height: 100%;
display: inline-block;
margin: 0;
padding: 0px;
}
.service-specificBar-tab:nth-child(2) {
background: blue;
}
.service-specificBar-tab:nth-child(4) {
background: green;
}<div id="gray">
<div id="service-specificBar-container">
<div id="service-specificBar"><div class="service-specificBar-tab">A
</div><div class="service-specificBar-tab">B
</div><div class="service-specificBar-tab">C
</div><div class="service-specificBar-tab">D
</div>
</div>
</div>
</div>