前提・実現したいこと
JavaScriptで、グローバルナビの表示の出し分けを行いたい。
(現在地へのリンクにclass="active"が追加される)
発生している問題
login.htmlアクセス時、JavaScriptのif文で複数の分岐に入ってしまう。
console.logでどこの分岐に入ってしまっているか確認すると、
「c」「a」と表示され、2つの分岐に入っていることが確認できる。
(index.html、regist.html表示時は問題ありません。)
上記の「実現したいこと」自体は実現できているのですが、
(下記「試したこと」参照)
if文で複数の分岐に入ってしまう原因を知りたく、質問させていただきました。
よろしくお願いいたします。
該当のソースコード
JavaScript
1$(function() { 2 //グローバルナビのクラス変更 3 $('.global_nav').find('a').each(function() { 4 if (location.pathname != '/') { 5 if (location.pathname === $(this).attr('href')) { 6 $(this).parent('li').addClass('active'); 7 console.log('a'); 8 } else if (location.pathname.indexOf('regist') > -1) { 9 $('#regist').addClass('active'); 10 console.log('b'); 11 } else { 12 $('#index').addClass('active'); 13 console.log('c'); 14 } 15 } else { 16 $('#index').addClass('active'); 17 console.log('d'); 18 } 19 }); 20 21});
html
1<ul class="global_nav"> 2 <li id="index"> 3 <a href="index.html">トップ</a> 4 </li> 5 <li id="regist"> 6 <a href="/regist.html">会員登録</a> 7 </li> 8 <li id="login"> 9 <a href="/login.html">ログイン</a> 10 </li> 11</ul>
試したこと
・キャッシュの削除・ページのリロード→変わらず
・console.log('c')に至る分岐を削除→「a」としか表示されないため、「b」「d」に至る分岐には入っていないようです。
・console.log('a')に入る分岐を下記のコードに変更→「c」に至る分岐に入らなくなりました。(想定している動きになりました)
JavaScript
1if (location.pathname.indexOf('login') > -1) { 2 $('#login').addClass('active'); 3 console.log('a');
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/01/25 01:55