window.location.hrefが特定の文字列と一致しない場合、要素にCSSクラスを追加します。

Question

javascript/jQueryの新機能で、ページのURL が一致しない場合、要素にCSSクラスを追加しようとしています 3つの弦。私はこれらの行のコードを動作させることはできません。

if (window.location.href.match(/(interests|ideas|art)/) > -1) { 
    jQuery("#nav-about").addClass('active'); 
    } 

私の構文は間違っていますか？

EDIT：

それは誰もが私が作業しなければならない与えられた答えのように思えるが、彼らはありません。たぶん、私のコードの他の行が矛盾している：

$(document).ready(function() { 
    if (window.location.href.search(/(interests|ideas|art)/) > -1) { 
     jQuery("#nav-about").addClass('active'); 
    } 
    if (window.location.href.match(/(interests)/) != null) { 
    jQuery("#nav-interests").addClass('active'); 
    } 
    if (window.location.href.match(/(ideas)/) != null) { 
    jQuery("#nav-ideas").addClass('active'); 
    } 
    if (window.location.href.match(/(art)/) != null) { 
    jQuery("#nav-art").addClass('active'); 
    } 
}); 

私のサイトはbenxd.meです。このメインページのリンク#nav-aboutは、クラスactiveが必要です。このページではスクリプトは機能しません。他のページ、興味、アイデア、写真撮影のスクリプト。

Answer 1

.search()は.match()ではありません。 .search()の戻り値は最初の一致のインデックスです。一致しない場合は-1です。 .match()の戻り値である：全体の一致結果および任意括弧捕捉一致結果を含む

Array。一致がなかった場合はnull。

上記の問題を修正

、とあなたはURLがない試合をするときに、クラスを追加したい述べてきたことを考えると、コードは次のようになります。

あなたが使用することができます

if (window.location.href.search(/(interests|ideas|art)/) === -1) { 
    jQuery("#nav-about").addClass('active'); 
} 

Answer 2

string.searchまたはjsのstring.indexOfメソッド。次にコードの例を示します。

var url = 'http://localhost:3000/interests'; 
var url1 = 'http://localhost:3000/ideas'; 

if (url.search('interests') > -1) { 
    // do your work 
} 

または

if (url1.indexOf('ideas') > -1) { 
    // do your work 
} 

ここにあなたのフィドルがあります。私は同じ基本的な手順を実行するには、次の機能を使用し

https://jsfiddle.net/Refatrafi/grxpmaon/3/

Answer 3

。

function NavSetActiveLink() { 
    var currentLocation = window.location.pathname; 
    $(".nav-element a").each(function(){ 
     if ($(this).attr('href') === currentLocation){ 
      $(this).addClass('active'); 
      return false; // break out of the loop 
     } 
    }); 
} 

関数各.nav-element aを循環及び相対リンクを仮定すると、現在のwindow.location.pathnameと一致HREFと第<a>を見出します。

あなたのnav要素のそれぞれに直接関連する<a>タグ（親、子、または自己）がある限り、これを行うことができます。