特定のURLの時にjQueryでクラスを付加する

完成のイメージ

お問い合わせのフォームに入力画面、確認画面、完了画面があるけど、こういうのどうやればいいんだ??

  • 入力画面では→ 「入力」の文字と背景が赤色
  • 確認画面では→ 「確認」の文字と背景が赤色
  • 完了画面では→ 「完了」の文字と背景が赤色

currentクラスをつけた時にCSSで装飾を変えるところまではできたけど、この先どうすればいいか分からない。。。

結論

jQueryで特定のURLの時にcurrentというクラスを付加する。

currentのクラスがついたら、文字を赤色。背景色を薄い赤色にする(装飾の設定はCSSでOK)。

jQuery

  $(window).bind("load", function () {

    // URLが contactus.htmlの時に、
    if (document.URL.match(/contactus.html/) || document.URL.match(/contactus.html/))

      // <li class="contactus"> を <li class="contactus current">にする(currentクラスを付加する)
      $('li.contactus').addClass("current");
    }
  });

以上です。

jQueryはよく分からなくても、コピペでいけそうですね。

解説

さすがに素っ気ないので少し解説します。

まずCSSでcurrentのクラスがついたら装飾が変わるようにします。
今回の場合は文字を赤色、背景色を薄い赤色に設定しています。

そして、デフォルトではcurrentクラスをつけずに、特定のURLの時にcurrentクラスを付加するようにjQueryで調整します。

よくわからないし面倒くさい、、、

これは自分には無理だ、わけわからん。


そんな方でも全然大丈夫です。

URLさえわかればOK。

下記にコードを載せたので、ご活用くださいませ。

See the Pen Untitled by shimpei (@shimpei) on CodePen.

※CodepenではURLが一致しないので、何も変化がありません。お使いの環境に合わせて、適宜URLとクラス名を変更くださいませ。

では、最後までありがとうございました。