次のようなナビゲーションバーにおいて、クリックをした後に、activeのclassを付与するjavascriptを実装したかったのですが、上手くいかず質問させて頂きました。
こういう記事なども拝読して対応しているのですが、どうも上手くいかず。
http://stackoverflow.com/questions/22518099/bootstrap-menu-change-li-active-class-on-click
該当箇所
<ul class="sidebar-menu"> <li> <a href="/users">ユーザー一覧</a> </li> </ul>
javascriptコンソールでセレクタからの取得はできております。
$('.sidebar-menu li')
=> [<li>...</li>]
該当javascript
$(function(){ $('.sidebar-menu li').on('click', function() { $(".nav-list li").removeClass("active"); //$(this).addClass("active"); this.className = "active"; }); });
↑では、 $(this) や this、 addClass や className などの組み合わせで複数パターン検証しましたが、ダメでした。
読み込みの順番に問題があるのかと思いまして、
・$(document).ready
・window.load
なども試しました。
しかしダメです。
javascriptコンソールでブレークポイントを止めた際
this
=> <li>...</li>
確かにthisは取得できております。
ブレークポイントでとめた上でthis.className = "active";
とすると上手くいくのですが、どうも、通常の場合ですと上手くいきません。
ブラウザのリロードは勿論しております。
また、alert; や console.log; などできちんと該当のjavascriptの箇所を通っていることも確認しております。
コンソール上にもエラー文がでているわけでもありません。
他に思いつく解決策がわからずとても困っております。
何卒宜しくお願いします。
今回やりたいこととのイメージ図
googleの検索結果等にありますようなこういうやつです。
.navbar-nav>li.active>a{ background-color: #367FAA; }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/14 16:34
2016/08/14 16:36
2016/08/14 16:43
2016/08/14 17:07
2016/08/14 23:18