jQuery使用变量更改背景颜色

Question

方案

3个导航项目

<a href='#one'></a> <a href='#two'></a> <a href='#three'></a>

3节

<section id='one'></section>
<section id='two'></section>
<section id='three'></section>...

制作导航栏项目background-color = section background-color

基本图形示例 http://i.stack.imgur.com/3VTBG.jpg

的jsfiddle http://jsfiddle.net/kolorweb/r871bzz3/

我设法使用一个检索剖面背景颜色的变量来进行动态颜色更改。

但是如何在点击其他导航项时删除此背景颜色属性。

$('nav ul li a').click(function() {
  $('nav ul li a').removeClass('active');
  $(this).addClass('active');

  // gets #''
  var section_id = $(this).attr('href');

  // this is the variable I want to apply to the relevant nav a on click.
  var section_color = $(section_id).css('background-color');

  // applying variable to the nav item that has been clicked  
  $(this).css('background-color', section_color);

  // HOW DO I THEN REMOVE THIS PROPERTY WHEN ANOTHER NAV ITEM IS CLICKED?




});

nav ul li {
  list-style: none;
  display: inline;
}
nav a {
  text-decoration: none;
  padding: 10px 20px;
}
.active {
  background-color: tomato;
}
#one {
  width: 100vw;
  height: 100px;
  background-color: tomato;
}
#two {
  width: 100vw;
  height: 100px;
  background-color: pink;
}
#three {
  width: 100vw;
  height: 100px;
  background-color: steelblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <ul>
    <li><a href="#one">one</a>
    </li>
    <li><a href="#two">two</a>
    </li>
    <li><a href="#three">three</a>
    </li>
  </ul>
</nav>

<section id="one">One</section>
<section id="two">Two</section>
<section id="three">Three</section>

Answer 1

在申请活动之后不要从其他地方移除，但在之前删除：

$('nav ul li a').click(function() {
  $('nav ul li a').removeClass('active');
  $(this).addClass('active');

  // gets #''
  var section_id = $(this).attr('href');

  // this is the variable I want to apply to the relevant nav a on click.
  var section_color = $(section_id).css('background-color');

  // remove from all
  $('nav ul li a').css('background-color', '');

  // applying variable to the nav item that has been clicked  
  $(this).css('background-color', section_color);

});

一个简短的链式版本：

$('nav ul li a').click(function() {
  $('nav ul li a').removeClass('active').css('background-color', '');
  $(this).addClass('active').css('background-color', $($(this).attr('href')).css('background-color'));
});