category:
Technology
Back to Blog Index
jQueryでカレントページの要素にclass=”current”を付加する方法
さくっと実装できたのでメモ。
<ul class="menu">
<li id="menu01"><a href="/page01/">page01</a></li>
<li id="menu02"><a href="/page02/">page02</a></li>
<li id="menu03"><a href="/page03/">page03</a></li>
</ul><ul class="menu">
<li id="menu01" class="current"><a href="/page01/">page01</a></li>
<li id="menu02"><a href="/page02/">page02</a></li>
<li id="menu03"><a href="/page03/">page03</a></li>
</ul>
$(function(){
var url = window.location.pathname;
$('.menu li a[href="'+url+'"]').parent().addClass('current');
});<ul class="menu">
<li id="menu01">
<a href="/page01/">page01</a>
<ul>
<li><a href="/page01/sub01/">sub01</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li id="menu01" class="current">
<a href="/page01/">page01</a>
<ul>
<li><a href="/page01/sub01/">sub01</a></li>
</ul>
</li>
</ul>
$(function(){
var url = window.location.pathname;
var url = "/"+url.split("/")[1]+"/";
$('.menu li a[href="'+url+'"]').parent().addClass('current');
});