search :

archive :



« サイトに音楽プレイヤーを付けられる「SPEAKKER」 | トップ | おすすめの&使ってみたい印刷会社 »

current jquery 現在地表示

_jQuery | August 18, 2012, 19:50
はてなブックマーク

さくっと実装できたのでメモ。

<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>

上記のようなHTMLがあって、

<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>

上記のようにしたい場合、headタグ内でjQueryを読み込んだ上で、JavaScriptで下記のように書きます。

$(function(){
	var url = window.location.pathname;
	$('.menu li a[href="'+url+'"]').parent().addClass('current');
});


window.location.pathnameでサイトルート相対のURLが取得でき、そのURLにマッチしたアンカーの親要素(この場合はli)にcurrentというclassを追加します。


サブメニューがある場合、以下のようにします。
例:カレントが/page01/sub01/のときに、page01にclass="current"をつけたい場合

<ul class="menu">
  <li id="menu01">
    <a href="/page01/">page01</a>
    <ul>
      <li><a href="/page01/sub01/">sub01</a></li>
    </ul>
  </li>
</ul>

上記のようなHTMLがあって、

<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>

上記のようにしたい場合、headタグ内でjQueryを読み込んだ上で、JavaScriptで下記のように書きます。

$(function(){
	var url = window.location.pathname;
	var url = "/"+url.split("/")[1]+"/";
	$('.menu li a[href="'+url+'"]').parent().addClass('current');
});

window.location.pathnameでは「/page01/sub01/」が返ってきますが、「/page01/」を取得したいので、スラッシュでsplitし、2番目の要素の前後にスラッシュを付加します。

プロフィール

プロフィール

WEB制作・ブランディングを主軸とした、株式会社クリーム代表取締役。

案件につきましては、「お問い合わせページ」からお気軽にご相談ください。

Recommend

  • Josef Muller-Brockmann: Pioneer of Swiss Graphic Design
  • Who Owns The Water?
  • Helvetica: Homage to a Typeface
  • Corporate Diversity: Swiss Graphic Design and Advertising by Geigy, 1940-1970
  • Typography (Graphic Design in Context)
  • +81 voyage or Tokyo Graphic passport World Tour---At Center Pompidou in Paris and 3331 Tokyo
  • WONDERWALL ARCHIVES 01

archive :