javascript - 現在のタイトルとの一致を確認して、アンカーにクラスを追加しますか？

Question

次のようなナビゲーションメニューがあります。

<div class="my_menu">
  <ul>
    <li><a href="http://localhost/en/about-us">About Us</a></li>
    <li><a href="http://localhost/en/contact">Contact</a></li>
  </ul>
</div>

ページのURLと一致するときに、メニューにアクティブなクラスを追加する関数を作成しようとしています。

$(".top_navigation li a").filter(function() {
    alert($(this).href);
    alert($(location).attr('href'));
    return $(this).href() === $(location).attr('href');
  }).addClass('newClass');

私はどこで間違っているのですか？

Answer 1

location.hrefjqueryを必要とせずに、ページのURLに直接アクセスできます。

dom要素の属性を取得するには、次を使用できますattr

 $(this).attr('href')

これは機能するはずです：

$(".top_navigation li a").filter(function() {
    return $(this).attr('href') === location.href);
}).addClass('newClass');

Answer 2

これは、あなたが期待していることを行うはずの、小さくて少し単純な jQuery スニペットです。

$(".topnavigation li a").each(function() {
    if($(this).attr("href") == window.location) {
        $(this).addClass("newClass");
    }
});

デモ:小さなリンク.

お役に立てば幸いです。

Answer 3

このようにしてください。

$(".top_navigation li a").addClass(function() {
    return this.href === location.href ? "newClass" : "";
});