開いているページのメニューのcssを変えたい

Question

サイトのナビゲーションなどによくある、現在開いているページのメニューのcssを変えたいのですが、どのようにすれば良いのでしょうか？

現在下記のように記述しているのですが、上手くいきません。

<nav role="navigation" id="subgnavi">
<ul class="subgnavi">
	<li><a href="<?php echo home_url(); ?>">ホーム</a></li>
	<li><a href="<?php echo home_url(); ?>/i">いいい</a></li>
	<li><a href="<?php echo home_url(); ?>/u">ううう</a></li>
	<li><a href="<?php echo home_url(); ?>/e">えええ</a></li>
	<li><a href="<?php echo home_url(); ?>/o">おおお</a></li>
</ul>
</nav>

ul.subgnavi li {
  display: inline-block;
  padding: 15px 0 10px;
  border-bottom: 5px solid #fff;
}
ul.subgnavi li a {
  border-right: 1px solid #eee;
  color: #000;
  display: block;
  font-size: 15px;
  font-weight: bold;
  padding: 5px 9px;
  box-sizing: border-box;
  text-decoration: none;
}
ul.subgnavi li.active {
  border-bottom: 5px solid #971315;
}

$(function(){
  $("#subgnavi ul.subgnavi li").click(function(){
    $("#subgnavi ul.subgnavi li.active").removeClass("active");
    $(this).addClass("active");
  });
});

追記
以下の方法で、自分のしたいことがほぼ出来るようになりました。
ですが、この記述だとホームにずっと"active"がついたままになってしまいます...。
どうしたらいいでしょうか...。

$(function(){
  $('#subgnavi ul.subgnavi a').each(function(){
    var $href = $(this).attr('href');
    if(location.href.match($href)) {
      $(this).parent().addClass('active');
    } else {
      $(this).parent().removeClass('active');
    }
  });
});

Answer 1

こんな感じ？

$(function(){
  $("#subgnavi ul.subgnavi li").on('click',function(){
    $(this).siblings('.active').removeClass("active").end().addClass("active");
  }).find('a').on('click',function(e){
    e.preventDefault();
  });
});

ようはliをクリックしようとしても下位のaが反応してしまうので、イベントを殺してやることです

Comments

[退会済みユーザー]

ありがとうございます！
私がやりたかったことが出来るようになりました！！

ですが、今度はクリックしてもリンク先に飛ばなくなってしまいました....。

[yambejp]

＞　今度はクリックしてもリンク先に飛ばなくなってしまいました

リンク先にとんだらactiveを返る意味なくないですか？
ページ内リンクなのでしょうか？（見た感じ別ページに見えますが・・・）

[退会済みユーザー]

別ページにリンクするようになっています...。

下記のドコモページのように、クリックして、
開いてるページに当たるメニューのcssを変えることはできないのでしょうか...？
https://www.nttdocomo.co.jp/product/?icid=CRP_globalnavi_to_CRP_PRD

[yambejp]

飛び先にも同じようなメニューがあってactiveを継承するという意図ですかね？
それならば各ページにスタティックに自分のページに該当するメニューに
activeをつけて置くだけなのでjavascript自体いらないでしょう

[退会済みユーザー]

そうではないんです...私の説明が分かりずらいようで...申し訳ありません。

静的ページではなく、phpファイルなんです。
このメニューの部分は他のページでは、<?php include ( TEMPLATEPATH . '/gnavi-sub.php'); ?>で読み込んでいます。

[yambejp]

なにか大きな誤解があるようですが
・ページを遷移するなら各ページで最初からactiveを設定できる
・ページが遷移しないなら提示したsampleで十分

Answer 2

今回は以下のページのWordPressでやる場合の部分を参考にしたところ無事解決いたしました。
https://www.sriproot.net/blog/current-navigation-1151

回答してくださった3人の方にはとても感謝しております。
結局皆さんからいただいた回答ではない方法で解決できましたが、
一番最初に回答してくださり、何度もやり取りをさせていただいた方をベストアンサーとさせていただきました。

回答してくださった皆さん。本当にありがとうございました。

Answer 3

今回は以下のページのWordPressでやる場合の部分を参考にしたところ無事解決いたしました。
https://www.sriproot.net/blog/current-navigation-1151

回答してくださった3人の方にはとても感謝しております。
結局皆さんからいただいた回答ではない方法で解決できましたが、
一番最初に回答してくださり、何度もやり取りをさせていただいた方をベストアンサーとさせていただきました。

回答してくださった皆さん。本当にありがとうございました。

Answer 4

http://jsdo.it/a4t5634634267/W94Z

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<!-- /a4t5634634267/W94Z -->
<nav class="navbar navbar-expand navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="/a4t5634634267/W94Z">active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/a4t5634634267/W94Z?x">deactive</a>
      </li>
    </ul>
    </div>
</nav>

$(function(){
    var $href=  "/a4t5634634267/W94Z"; // location.path 等
    $("a[href='" + $href + "']").parents("li").addClass("active");
        
});

こんなことか？

Answer 5

WordPressタグがついているので…

メニューで作成してwp nav menuで読み込めばアクティブなページのliのクラスにcurrent-menu-itemがつきますし、functions.phpを編集すればcurrent-menu-item以外に変更することもできますが、それだと何か問題が出ますか？
参考　http://totsugekirock.com/2016/06/27/131/