Amahoro Imagineer!

初心者エンジニアが日々の学びをアウトプットするブログ。

jQueryで現在のページのリンクの背景色などを変える

背景

僕は現在、TECH::EXPERTというプログラミングスクールでRubyRuby on Railsを用いたアプリケーションの作り方を勉強していて、
最終課題としてメルカリのクローンアプリの開発をチームで行っています。

ちなみに、開発環境は以下の通り。

HTMLはhamlを使って、CSSはSCSS記法を使って記述しています。

この記事で伝えたいこと

みなさん、こんにちは。ゴールデンウィークいかがお過ごしでしょうか?

僕は図書館に籠ってプログラミングの勉強をしたり、エントリーシートを書いたりしています。

さて、記事のタイトルのつけ方が下手すぎて、自分でも驚きです。
この記事のタイトルを見ただけで、何のことを言っているかわかった方は驚異的な読解力の持ち主と言って良いでしょう。

言葉だけではうまく説明できないので、GIFを使って説明します。

クローン版メルカリ Before
クローン版メルカリ Before

現時点では、どのページを開いても左にあるナビゲーションの「支払い方法」の背景色がグレーっぽくなっています。

この部分のコードはこんな感じです。

<li class="mypage-sidebar-list__item">
  <a class="mypage-sidebar-list__link js-mypage-sidebar-current-page" href="/users/1/mypages/card">
    支払い方法
    <div class="mypage-sidebar-list__icon">
      <i class="fas fa-chevron-right mypage-sidebar-list__icon"></i>
    </div>
  </a>
</li>
<!-- 省略 -->
<li class="mypage-sidebar-list__item">
  <a class="mypage-sidebar-list__link" href="/users/1/mypages/logout">
    ログアウト
    <div class="mypage-sidebar-list__icon">
      <i class="fas fa-chevron-right mypage-sidebar-list__icon"></i>
    </div>
  </a>
</li>

.js-mypage-sidebar-current-page{
  background: #eee;
  font-weight: 600;
  font-size: 14px;
  .mypage-sidebar-list__icon{
    color: #333;
  }
}

現在のコードでは、「支払い方法」のaタグに直接、js-mypage-sidebar-current-pageというclass名を与えているので、どのページに飛んでもこの部分の色がグレーっぽくなっているのです。

それを今回は、jQueryを使って、以下のように、現在開いているページのリンクの色が変わるようにしたいと思います。

クローン版メルカリ After
クローン版メルカリ After

結論

結論を先取りすれば、jQueryを使って以下のように書けば実装できます。

$(function(){
  var link = $('.mypage-sidebar-list__link');
  var currentUrl = location.pathname;

  link.each(function() {
    if ($(this).attr("href") == currentUrl) {
      $(this).addClass("js-mypage-sidebar-current-page");
    }
  })
});

eachメソッドを使って、a class="mypage-sidebar-list__link"1つ1つのhref属性の値を確認し、現在開いているページのパスと一致すれば、
そのaタグにjs-mypage-sidebar-current-pageというclass名を与える、というとてもシンプルな処理です。

jQueryを使って現在のページのURLやパスを取得する方法

Locationオブジェクトというものを使うと、現在開いているページのURLやらパスやらを取得することができます。

■URLを取得する


location.href

=> "http://localhost:3000/users/1/mypages"

■パスを取得する


location.pathname

=> "/users/1/mypages"

プロトコルを取得する


location.protocol

=> "http:"

ドメイン名を取得する


location.host

=> "localhost:3000"


参考サイト
jQueryでURLとパラメータを取得する方法:location | UX MILK


今回はaタグのhrefの値と比較したいのでlocation.pathnameを使っています。

$(this)の使い方が肝

仮に以下のようなコードにしたとします。

$(function(){
  if ($('.mypage-sidebar-list__link').attr("href") == currentUrl) {
    $('.mypage-sidebar-list__link').addClass("js-mypage-sidebar-current-page");
  }
});

これだと、すべてのリンクの色が変わってしまいます。

$('.mypage-sidebar-list__link').addClass("js-mypage-sidebar-current-page");のような書き方だと、
addClassメソッドの対象となる要素がすべてのa class="mypage-sidebar-list__link"になってしまうからです。

失敗した例
すべてのリンクの色が変わってしまった(汗)


こうならないようにするには、eachメソッドと$(this)を使う必要があります。

eachメソッドの中で$(this)を使った場合、$(this)は現在処理されている要素ということになります。

eachメソッドを使って複数あるmypage-sidebar-list__linkのhref属性の値を1つ1つ確認し、現在開いているページのパスと一致したものがあったら、
『その"mypage-sidebar-list__link"』js-mypage-sidebar-current-pageというclass名を与えるという処理にする必要があります。

『その"mypage-sidebar-list__link"』というのを表現するのに、$(this)を使うのです。

今日のポイント


◎ location.pathnameで、現在開いているページのパスが取得できる。

◎ eachメソッド内での$(this)は、現在処理中の要素を指す。