【JQuery】ナビメニューがクリックされた時、現在地を下線で表示する方法（カレント表示）

カレント表示とは
JQuery解説
ホバーもさせるなら
参考

カレント表示とは

ヘッダー内のナビメニューをクリックした時、クリックされたメニューのみ下線表示して、現在地を表示する方法を「カレント表示」と言います。英語のcurrent（現在の）が由来なのでしょう。

下のResultにて各ヘッダーをクリックすると、クリックしたメニューのみ赤い下線が表示されます。

See the Pen Untitled by Takuma (@takushin0202) on CodePen.

JQuery解説

$(function () {
 $(".header-nav li a").on("click",  function() {
  if( $("[href^='#']") ){
  $(".header-nav   li").removeClass('current');
  $(this).parent().addClass('current');
  return false;
   }
  });
 });

２行目の$(“.header-nav li a”).on(“click”, function() {は、header-navの子要素であるliのさらに子要素であるaタグをクリックした時にfunction以下の処理をしなさい、という意味になります。
３行目の[href^=’#’]は、href属性が#から始まる要素を全て取得してきます。今回HTMLを見ると、全てのaタグのhref属性には#から始まる固有のリンク先がついてるので、実質全てのli要素が対象になります。なお^=は前方一致を意味してます（ビット排他的論理和演算子と呼ぶそうです）。
５行目の$(this).parent().addClass(‘current’); のthisは(“.header-nav li a”)を指しています。thisはそもそも何を指すのか？ですが、イベントが発生した要素を指します。となるとこの一連の記述の中でイベントが発生しているのは、clickイベントが発生している(“.header-nav li a”)がthisの指す内容になります。よって$(this).parent().addClass(‘current’);を分解して解説すると、thisのparent（親要素）、つまりli要素に.currentクラスを追加しなさい、という意味になります。よってheader-nav li aがクリックされ、#がついている全てのli要素からcurrentクラスが外される。ただしthisの指定によりクリックしたa要素の親要素のみcurrentクラスが追加されることでクリックした要素のみ下線が表示される、という仕組みです。

ホバーもさせるなら

ホバーした時にも下線表示させるなら、&:hoverを付け足してあげれば表示可能です。

See the Pen Header-nav currentShowWithHover by Takuma (@takushin0202) on CodePen.

参考

参考：【WordPress／jQuery】グローバルナビゲーションで現在のページにクラス名をつける方法【カレント表示】、【カレント表示】ナビゲーションの現在ページだけデザインを変える方法 6選、