javascript - jquery/ghostを使用して特定のページでアクティブページのスタイルを変える

Question

http://i.stack.imgur.com/Q9OMB.png

ここに私の小さな問題があります。基本的に私はGhost CMSのテーマをやっていますが、数時間私を悩ませている問題に遭遇しました.これを自分で解決することはできず、Googleから同じ種類の問題の原因を見つけていません. /sof どちらでもない。

私の目標は、すべてのリンクに対して同じスタイルで単一のループを回転させたいため、Ghost自体では達成できなかったため、jqueryを使用してページごとに異なるスタイル（ホームが赤、青など）のアクティブなページスタイリングを作成することです.

これまでのJqueryコード

$(function(){  
  $('a').each(function() {
      if ($(this).prop('href') == window.location.href) {
      $(this).addClass('homeCurrent');}
      });  
});

navbar の関連 HTML

<ul class= "nav navbar-nav navbar-left">
<li id="home" class="home hvr-sweep-to-top-home "><a href="/">Home</a></li>
<li id="about" class="about hvr-sweep-to-top-about"><a href="/page-about/">About</a></li>
</ul>

jqueryでさまざまな種類のIFステートメントを実行しようとしましたが、成功しませんでした。

コードのロジックは次のようになります。

ページがホームの場合 = li スタイルがホームカレント

<ul class= "nav navbar-nav navbar-left">
<li id="home" class="home hvr-sweep-to-top-home homeCurrent"><a href="/">Home</a></li>
<li id="about" class="about hvr-sweep-to-top-about "><a href="/page-about/">About</a></li>
</ul>

ページが about = li スタイルが aboutCurrent の場合

<ul class= "nav navbar-nav navbar-left">
<li id="home" class="home hvr-sweep-to-top-home"><a href="/">Home</a></li>
<li id="about" class="about hvr-sweep-to-top-about aboutCurrent"><a href="/page-about/">About</a></li>
</ul>

誰？

うまくいけば、私は関連するすべてを含めました。