カレントページ　aタグではなく、liに「activ

解決済

質問者：re999
質問日時：2012/03/22 18:11
回答数：2件

カレントページ　aタグではなく、liに「activeクラス」を付与したいのですが、
どうすれば良いでしょうか？

var URL = window.location.pathname;
$('ul#gnavi li a').each(function() {
linkURL =$(this).attr("href");
if ( URL == linkURL ){
　//$('ul#navi li').addClass('active"');//これだと全部activeになる
　//$(this).addClass('active');//これだとaがactiveになる
}

ナビ階層としては、＜ul＞＜li＞の中に、さらに＜ul＞＜li＞があります
一番外側のulにはid「gnavi」を付与しています
できれば、両階層とも「activeクラス」を付与したいのですが、
難しければ、とりあえず、中にある階層のliタグに「activeクラス」を付与したいです

jQueryを利用しようとしていますが、普通のjsで出来るのなら、そちらでやりたいです
(jQueryでもいいです)

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.2ベストアンサー

回答者： fujillin
回答日時：2012/03/22 20:31

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";
}
}

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございました。
大変参考になりましたー

通報する

お礼日時：2012/04/16 10:58

No.1

回答者： utun01
回答日時：2012/03/22 20:03

こんな感じでしょうか？

<html>
<head>
<title>テスト</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7 …
<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>