将动态颜色方案（通过类或其他方式）应用于HTML菜单选项卡

Question

我正在尝试创建一个显示过去5天的基于HTML的自定义日历。一旦用户点击不同的日期，我还没有创建要更新的内容。我实际上仍然坚持正确的造型。现在，在静态状态下，选择了第一个选项卡（顶部选项卡）。我已经给它一个类来使字体变大，从而使其包含<li>元素更大。

我想要做的是让用户点击不同的标签，并将背景颜色更新为白色。从下面的片段中，你会看到我走得那么远。但是，一旦用户点击任何给定的选项卡，其他选项卡的配色方案就会变得棘手。现在它是一个简单的渐变，顶部的光线朝底部较暗。但假设用户点击了中间。然后，必须改变渐变以使相邻的标签直接在其上方和下方具有第二最亮的颜色（最轻的将是活动标签，是白色的）。在我的CSS中，我尝试通过一个名为secondTab的类直观地编写代码。

问题：如何根据用户点击应用上述动态配色方案？换句话说，用户点击的任何标签都是白色的，所有其他标签会根据其与活动标签的关系位置更新background-color吗？

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