javascript - JS进行div颜色更改

嗨，我一直在写一些基本的html + css来制作导航栏，我决定尝试将JS合并到导航栏中，说“如果单击'测试'，请转到'测试'页面并保持颜色在所选页面上更改”
我当时正在考虑进行切换或其他操作，但是我不确定如何操作。
http://jsfiddle.net/3jp1d0fe/1/

html

<body>
    <div class="container">
    <div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a></div>
    <div class="column"><a href="https://www.google.co.uk"> Design</a></div>
    <div class="column"><a href="https://www.google.co.uk"> Build</a></div>
    <div class="column"><a href="https://www.google.co.uk"> Deploy</a></div>
    <div class="column"><a href="https://www.google.co.uk"> Test</a></div>
    <div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a></div>

</div>
</body>

的CSS

div.container {
    display: table;
    display: table-row;
}

div.column {
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:#c2ad80;

}

div.column a {
    color:white;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
    display:block;
    height:100px;
    width:100px;
    display: table-cell;
    vertical-align: middle;
}

div.column:hover {
    background-color: #a2884f;
}

最佳答案

我想您正在寻找这样的东西：

创建一个具有悬停状态的类。
单击该事件以设置课程时，添加一个事件。
在每个页面中，都需要将current类添加到.column中，以使其在进入页面时保持活动状态。

$(function () {
  $(".column a").click(function () {
    $(".current").removeClass("current");
    $(this).closest(".column").addClass("current");
    return false;
  });
  url = location.pathname.substr(1);
  $('a[href="' + url + '"]').closest(".column").addClass("current");
});

div.container {
  display: table;
  display: table-row;
}

div.column {
  display: table-cell;
  vertical-align:middle;
  text-align:center;
  background-color:#c2ad80;

}

div.column a {
  color:white;
  font-family: Arial;
  font-size: 12px;
  text-decoration:none;
  display:block;
  height:100px;
  width:100px;
  display: table-cell;
  vertical-align: middle;
}

div.column.current,
div.column:hover {
  background-color: #a2884f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
  <div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a></div>
  <div class="column"><a href="https://www.google.co.uk"> Design</a></div>
  <div class="column"><a href="https://www.google.co.uk"> Build</a></div>
  <div class="column"><a href="https://www.google.co.uk"> Deploy</a></div>
  <div class="column"><a href="https://www.google.co.uk"> Test</a></div>
  <div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a></div>
</div>

小提琴：http://jsfiddle.net/3jp1d0fe/2/