Apply Dynamic Color Scheme (through class or other means) to HTML Menu Tabs - html

Question

I am trying to create a custom-made HTML based calendar that displays the past 5 days. I have not yet created the content to be updated once the user clicks on the different dates. I'm actually still stuck on the proper styling. Right now, in its static state, the first tab (the top tab) is selected. I have given it a class to make the font larger and thereby making its containing <li> element larger.
What I would like to do is have the user click on different tabs and have the background color updated to white. From the snippet below, you will see that I got that far. However the color scheme for the other tabs becomes tricky once the user clicks on any given tab. Right now it's a simple gradient, light at the top darker towards the bottom. But suppose the user clicked in the middle. Then the gradient would have to change to have the adjacent tabs directly above and below it to have the 2nd lightest coloring (the lightest would be the active tab, being white). In my css I tried to code that in intuitively by having a class called secondTab.
Question: How do I apply a dynamic color scheme as described above based on user click? In other words, whichever tab the user clicks on will be white, and all the other tabs will update the background-color based on their relational position to the active tab?
.secondTab {
background-color: #cbdeea;
}
.thirdTab {
background-color: #a6cdd9;
}
.fourthTab {
background-color: #77b4c9;
}
.fifthTab {
background-color: #519ab6;
}
.contentTitleSize {
font-size: 50px;
}
.contentTitle {
color: #000;
height: 73px;
margin-top: 27px;
font-family: Play;
}
.contentTitle, .contentArea {
display:inline-block;
}
.contentArea {
height:320px;
width:312px;
margin-left: 25px;
overflow: hidden;
}
.subheading {
font-size: 18px;
height: 20px;
font-family: Play;
color: #77b4c9;
margin-top: 14px;
margin-bottom: 24px;
}
.outerContainer {
width:566px;
display:inline-block;
vertical-align: top;
margin-right: 27px;
}
section {
display:block;
}
*, :after, :before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
*, :after, :before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
.tabPanel {
display:inline-block;
vertical-align: top;
width:160px;
margin:0;
padding:0;
}
ul {
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
li {
display:list-item;
}
.listTabs {
display:block;
list-style: none;
font-size: 22px;
font-family: Play;
text-align: center;
padding-top: 12px;
padding-bottom: 13px;
color: #fff;
cursor: pointer;
-webkit-box-shadow: inset 0 1px 2.5px 0 rgba(0,0,0,.11);
box-shadow: inset 0 1px 2.5px 0 rgba(0,0,0,.11);
}
.container {
height:320px;
width: 100%;
margin-bottom:24px;
border-radius: 2px;
background-color: #fff;
font-family: Roboto-Regular,serif;
line-height: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.1)
}
.activeFont {
color:#77b4c9;
box-shadow: none;
transition: all .2s linear;
}
.activeTab {
background-color: #fff;
font-size: 50px;
margin-top: 15px;
display:block;
}
.bottomButton {
height: 61px;
background-color: #327ca3;
border-radius: 3px;
font-size: 20px;
font-family: Play;
letter-spacing: .4px;
color: #fff;
text-align: center;
line-height: 61px;
cursor: pointer;
}
<div class="outerContainer">
<section class="container">
<ul class="tabPanel">
<li class="listTabs activeFont" role="button" id="wotdDay0-select">
<span class="activeTab">02</span>
<span>OCT</span>
</li>
<li class="listTabs secondTab" role="button" id="wotdDay1-select">
<span>01</span>
<span>OCT</span>
</li>
<li class="listTabs thirdTab" role="button" id="wotdDay2-select">
<span>30</span>
<span>SEP</span>
</li>
<li class="listTabs fourthTab" role="button" id="wotdDay3-select">
<span>29</span>
<span>SEP</span>
</li>
<li class="listTabs fifthTab" role="button" id="wotdDay4-select">
<span>28</span>
<span>SEP</span>
</li>
</ul>
<div class="contentArea">
<a class="contentTitle contentTitleSize">Content Area</a>
<div class="subheading">
<span>
<strong>First</strong>
"Second and Third"::after
</span>
<span>more info</span>
</div>
<div class="A7AhX">
<p>lots of details</p>
</div>
</section>
<div>
<div class="bottomButton">
Click Me</div>
</div>
</div>