選択してあるタブの文字色を変えたい。

クリックで表示コンテンツを切り替えられるタブのメニューを作っているのですが、クリックした後（選択してあるタブ＜class="current"＞）の文字色を変えたいです。
hoverした時や、背景色は変えられたのですが、cssでcolorを指定してもなぜか反映されません。

あと、＜class="current"＞のついたタブはhoverしても変わらないようにしたいのですが・・・最初はできていたのですが色を変えたり色々いじっていたらいつのまにかhoverで反応するようになってしまいました。

何が原因なのでしょうか・・・。

<div id="navigation">
    <ul>
      <li><a href="#tab1" class="current">TOP</a></li>
      <li><a href="#tab2">PHOTOS</a></li>
      <li><a href="#tab3">LINK</a></li>
      <li><a href="#tab4">ABOUT ME</a></li>
    </ul>
  </div>

#navigation {
height:40px;
background-color:#BD923D;
margin-top:5px;
text-align: center;
}

#navigation ul{
  text-align: center;
  padding: 0;
}

#navigation li {
  list-style-type: none;
  line-height: 40px;
  float: left;
  width: 245px;
  box-sizing: border-box;
  border-right: #EDDAC0 2px solid;
}

.current{
  color: #825F2B; /*  ←これが反映されない */
    background:#FDF9F7;
}

#navigation a {
  font-size: 18px;
  display: block;
  text-decoration: none;
  letter-spacing: 3px;
  color: #fff;
}

ul li a:hover{
    background:#E6D09E;
}

#navigation li:last-child {
  border: none;
}

$(function() {

     $('#contents div[id != "tab1"]').hide();
     $("a").click(function() {
     $("#contents div").hide();
     $($(this).attr("href")).show();
     $($(this).attr("href")).children("div").show();
     $(".current").removeClass("current");
     $(this).addClass("current");
     return false;
     });


 });