Javascript 单击链接时，如何使跨距更改颜色

好的，我有4个跨距，我想要的是当我点击跨距中的链接时，链接所在跨距的颜色会改变。我也希望这样，当点击span中的另一个链接时，span会改变颜色，而之前点击的span会恢复到原来的颜色。如果解释得不好，很抱歉。 下面是我从另一个用户问的问题中得到的js。我试图使用它，并改变它为我工作，但经过多次失败的尝试，没有运气。感谢大家的耐心，我对JavaScript还是个新手，非常感谢大家的建议和帮助。提前谢谢！

$（文档）.ready（函数（）{
$（“#sec1”）。单击（函数（）{
$（“#sec1”）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});

CSS:
#sec1{高度：8vh；宽度：10%；文本对齐：中心；位置：固定；顶部：9vh；左侧：0；背景：rgb（238）；/*旧浏览器*/
背景：#7d7e7d；/*旧浏览器*/
背景：-moz线性梯度（顶部，#7d7e7d0%，#0e0e0e 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#7d7e7d）、颜色停止（100%、#0e0e0e））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，#7d7e7d0%，#0e0e0e 100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，#7d7e7d0%，#0e0e100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，#7d7e7d 0%，#0E0E 100%）；/*IE10+*/
背景：线性梯度（顶部，#7d7e7d0%，#0e0e100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#7d7e7d'，endColorstr='#0e0e0e'，GradientType=0）；/*IE6-9*/；
显示：内联；空白：nowrap；溢出：隐藏；
}
#sec1.1活动{
背景：灰色；
}
#sec2{高度：8vh；宽度：10%；文本对齐：中心；位置：固定；顶部：9vh；左侧：10.25%；背景：rgb（238）；/*旧浏览器*/
背景：#7d7e7d；/*旧浏览器*/
背景：-moz线性梯度（顶部，#7d7e7d0%，#0e0e0e 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#7d7e7d）、颜色停止（100%、#0e0e0e））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，#7d7e7d0%，#0e0e0e 100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，#7d7e7d0%，#0e0e100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，#7d7e7d 0%，#0E0E 100%）；/*IE10+*/
背景：线性梯度（顶部，#7d7e7d0%，#0e0e100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#7d7e7d'，endColorstr='#0e0e0e'，GradientType=0）；/*IE6-9*/；
显示：内联；空白：nowrap；溢出：隐藏；
}
#sec2.活动{背景：灰色；}
#sec3{高度：8vh；宽度：10%；文本对齐：中心；位置：固定；顶部：9vh；左侧：20.5%；背景：rgb（238）；/*旧浏览器*/
背景：#7d7e7d；/*旧浏览器*/
背景：-moz线性梯度（顶部，#7d7e7d0%，#0e0e0e 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#7d7e7d）、颜色停止（100%、#0e0e0e））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，#7d7e7d0%，#0e0e0e 100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，#7d7e7d0%，#0e0e100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，#7d7e7d 0%，#0E0E 100%）；/*IE10+*/
背景：线性梯度（顶部，#7d7e7d0%，#0e0e100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#7d7e7d'，endColorstr='#0e0e0e'，GradientType=0）；/*IE6-9*/；
显示：内联；空白：nowrap；溢出：隐藏；
}
#sec3.活动{背景：灰色；}
#sec4{高度：8vh；宽度：10%；文本对齐：中心；位置：固定；顶部：9vh；左侧：30.75%；背景：rgb（238）；/*旧浏览器*/
背景：#7d7e7d；/*旧浏览器*/
背景：-moz线性梯度（顶部，#7d7e7d0%，#0e0e0e 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#7d7e7d）、颜色停止（100%、#0e0e0e））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，#7d7e7d0%，#0e0e0e 100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，#7d7e7d0%，#0e0e100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，#7d7e7d 0%，#0E0E 100%）；/*IE10+*/
背景：线性梯度（顶部，#7d7e7d0%，#0e0e100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#7d7e7d'，endColorstr='#0e0e0e'，GradientType=0）；/*IE6-9*/；
显示：内联；空白：nowrap；溢出：隐藏；
}
#sec4.活动{背景：灰色；}

html：

我将使用box类选择器而不是ID，并清理HTML

$（文档）.ready（函数（）{
var$box=$（“.box”）。单击（函数（）{
$box.removeClass（'active'）；
$（this.addClass（'active'）；
});
});
a{color:#ffffffff；文本装饰：无；字体系列：arial；}
.盒子{
颜色：#ffffff；
背景：rgb（238238238）；
/*旧浏览器*/
背景：#7d7e7d；
/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#7d7e7d0%，#0e0e100%）；
/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#7d7e7d）、颜色停止（100%、#0e0e））；
/*铬，Safari4+*/
背景：-webkit线性梯度（顶部，#7d7e7d0%，#0e0e100%）；
/*铬10+，Safari5.1+*/
背景：-o-线性梯度（顶部，#7d7e7d0%，#0e0e100%）；
/*歌剧院11.10+*/
背景：-ms线性梯度（顶部，#7d7e7d0%，#0e0e100%）；
/*IE10+*/
背景：线性梯度（顶部，#7d7e7d0%，#0e0e100%）；
/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#7d7e7d'，endColorstr='#0e0e0e'，GradientType=0）；
/*IE6-9*/
;
显示：内联块；
填充：10px 20px；
空白：nowrap；
}
.主动{
背景：#aaa；
}
我会使用box类选择器而不是id，然后进行清理
<script>
$(document).ready(function() {
        $("span.box").click(function() {
            $("span.box").removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

$(document).ready(function() {

  // click box 1
  $("#sec1").click(function() {
    $(this).addClass('active');
    $("#sec2").removeClass('active');
    $("#sec3").removeClass('active');
    $("#sec4").removeClass('active');
  });

  // click box 2
  $("#sec2").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec3").removeClass('active');
    $("#sec4").removeClass('active');
  });  

  // click box 3
  $("#sec3").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec2").removeClass('active');
    $("#sec4").removeClass('active');
  });  

  // click box 4
  $("#sec4").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec2").removeClass('active');
    $("#sec3").removeClass('active');
  });  

});

.box {
  text-align:center;
  top:9vh;
  left:0;
  background-color: #7d7e7d;
  display:inline;
  white-space:nowrap;
  overflow:hidden;
  margin: 3px;
  padding: 3px;
}

.active {
  background-color: green;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<span id="sec1" class="box">
  <a href="#">
    MOVIES
  </a>
</span>

<span id="sec2" class="box">
  <a href="#">
    MUSIC
  </a>
</span>

<span id="sec3" class="box" >
  <a href="#">
    RADIO
  </a>
</span>

<span id="sec4" class="box">
  <a href="#">
    COMICS
  </a>
</div>

</body>
</html>