- ベストアンサー
カレントページのliタグにactiveクラスを付与する方法
- カレントページのliタグにactiveクラスを付与する方法を教えてください。
- どうすればカレントページのliタグにactiveクラスを追加できるのでしょうか？
- jQueryまたはJavaScriptを使用して、カレントページのliタグにactiveクラスを付ける方法を教えてください。
- re999
- お礼率61% (476/777)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
HTMLの構成がはっきりとはわかりませんが推測で・・・ $(this).paernt("li").addClass("active"); gnaviの外側（祖先要素）にLIが無いと仮定して、外側も付与するなら $(this).parents("li").addClass("active"); ライブラリを使わないならこんな感じでしょうか。 （onloadなどで実行してください） var URL = window.location.pathname; var i, a, elm; var a = document.getElementById("gnavi").getElementsByTagName("a"); for(i=0; elm=a[i++];) if(elm.href==URL){ while(elm && (elm=elm.parentNode)){ while(elm && elm.nodeName!="LI") elm = elm.parentNode; if(elm) elm.className += " active"; } }
その他の回答 (1)
- utun01
- ベストアンサー率40% (110/270)
こんな感じでしょうか？ <html> <head> <title>テスト</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $('li a').each(function(){ $(this).click(function(){ $('li').removeClass('active'); $(this).parent().addClass('active'); }); }); }); </script> <style type="text/css"> .active{background-color: #CCCCCC} </style> </head> <body> <ul> <li><a href="#">test1</a></li> <li><a href="#">test2</a></li> <li><a href="#">test3</a></li> <li><a href="#">test4</a></li> </ul> </body> </html>
お礼
回答ありがとうございました。 parent().を使うんですね。 大変参考になりましたー
お礼
回答ありがとうございました。 大変参考になりましたー