jQueryを使用してnavメニューの現在のページ項目を強調表示

Question

私はこれをオンラインですべて読んだことがありますが、それ以外のものはあまりにも複雑で、単純なコードを実装したいだけで、だから私はこれがjqueryのnoobとしての良いチャレンジかもしれないと思った。私はこのコードを思いついたが成功しなかった。

HTML

<ul id="nav"> 
    <li><a href="/" id="home" class="lettering">HOME</a></li> 
    <li><a href="/about" id="about" class="lettering">ABOUT</a></li> 
    <li><a href="/works" id="works" class="lettering">WORKS</a></li> 
    <li><a href="/contact" id="contact" class="lettering">CONTACT</a></li> 
</ul> 

jQueryの

$(document).ready (function(){ 
    var path = window.location.pathname; 
    $('#nav li a').each(function() { 
     if(path = ("/"+this.id+"/")){ 
      this.addClass('active'); 
     } else { 
      ('#home').addClass('active'); 
     } 
    }) 
}) 

私はあなたたちが私を炎しないことを望む、私の意思ではなく、結果を得るよりも、純粋に学術的です。ここでの問題は何ですか？私はエラーログや何かbtwを取得していないよ。

編集：後ろのスラッシュ（感謝ジャスティン）を削除し、Phrogzが提案したが運がないものも試しました。もし誰かが挑戦する気がするなら、サイトは@ egegorgulu.comにあります

Answer 1

誰かがさまよっている場合は、次の関数を思いついた。彼の指針のためにGregLに感謝し、それは私を助けました。

jQuery.noConflict()(function(){ 
    var $ = jQuery; 
    var path = window.location.pathname; 
    $('#nav li a').each(function() { 
     if(path === "/" + this.id + "/"){ 
      $(this).addClass('active'); 
     } else if(path === "/") { 
      $('#home').addClass('active'); 
     } 
    }); 
}); 

noConflictの理由は、私の連絡先ページに埋め込み連絡先フォームを使用しているためです。そして、私は2番目のifが不要であると確信していますが、それが正しく機能したら、それを削除したくありません。

Answer 2

あなたのjsにはパスの後ろにスラッシュが付いていますが、タグのhrefにはスラッシュはありません。サーバーが後続のスラッシュを追加しない限り、これらのパスは決して一致しません。

Answer 3

あなたのJavascriptに間違いがあります。

あなたが.each()内、thisはそれ上の任意のjQueryのメソッドを呼び出すために、DOM要素オブジェクトを参照していることを知っておく必要があります主な理由は、jQueryの関数にthisを渡す必要があります：$(this)。

$(document).ready (function(){ 
    var path = window.location.pathname; 
    $('#nav li a').each(function() { 
     if(path === "/"+this.id){ // EDIT: This was the problem with the if 
      $(this).addClass('active'); // "this" is a DOM element, not a jQuery object 
     } else { 
      $('#home').addClass('active'); // you missed the $ 
     } 
    }); // always get in the habit of being explicit with your semicolons 
}); 

EDIT：

ので、代わりに次のことを試して、問題をifは、あなたが代入演算子=の代わりに、比較演算子==（型変換と等しい）と同じで/ ===（平等を使用したことだったあなたにタイプ）。私はそれに対処するために上記のコードを編集しました。

EDIT 2：あなたの点に注意し、脇学術として

$(document).ready (function(){ 
    var path = window.location.pathname; 
    var $navLinks = $('#nav li a'); 
    $navLinks.removeClass('active'); // start with a blank slate 
    $navLinks.filter(function() { 
     return path.indexOf(this.href) === 0; // test if the pathname starts with the current link's href attribute 
    }).addClass('active'); // find a matching link to add the class to where the href attribute starts with the pathname 
    if ($navLinks.filter('.active').length === 0) { // if nothing matches 
     $('#home').addClass('active'); // make the home link active as a default 
    } 
}); 

：さて、試合を見つけること<a>要素にhref属性を利用するためにjQueryのfilter()機能を活用する新しいアプローチを試してみましょう

$(document).ready (function(){ 
    if (!$('#nav li a').removeClass('active').filter(function() { 
      return window.location.pathname.indexOf(this.href) === 0; 
     }).addClass('active').end().filter('.active').length) { 
     $('#home').addClass('active'); // make the home link active as a default 
    } 
}); 

略したが、ハードディスクということですどのように

：あなたが好きなら、それは限り小さくなることができるように、このさらに圧縮するためにjQueryの強力な連鎖構文といくつかのJSの知識を利用することができます理解していないコード（テストされていないもの、btw）？