ネットショップ立ち上げ備忘録

初心者がネットショップを立ち上げるまでに関連する技術や考察の備忘録です。ネットショップでのSEO対策や、アクセス・集客方法、広告手法、デザインなどについても記事を公開しています。

PREV | PAGE-SELECT | NEXT



≫ EDIT

スポンサーサイト



上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


関連スクラップ記事

関連エントリ抽出中...
このエントリーをはてなブックマークに追加 Clip to Evernote

| スポンサー広告 | --:-- | TOP↑

≫ EDIT

メニューがアクティブ時にクラスを追加するJavascript



メニューがアクティブ時にクラスを追加するJavascript

あれよというまに4月に突入してしまいました。
震災の影響もありバタバタしているところです。

今回はメニュー部分に関してのコードです。
よく、今いるページの時はメニューがアクティブになっていてわかりやすい表示をするUIがあります。

例えば今いるURLがメニューのURLと同じURL、つまり
今いるURLと、メニューのaタグURL http://example.com/index.html
にいる時はクラスに active 要素を付加したいという場合があるとします。

単純に各々メニュー部分にその時のURL時でのHTMLにクラスをつけてあげれば良いのですが、
これでは何とも面倒ですし、変更が伴うとその度に修正しなければなりません。

そこでjQueryを使って処理します。


サンプルコード


jQueryを使っていますので、先にjQueryファイルを読み込んである事が条件です。

var url = document.URL.split('/');

$('ul li a').each(function(){
var menu_href = $(this).attr('href').split('/');
if (menu_href[3] == url[3]) {
$(this).addClass("active");
}
});


解説していきますと、
document.URLで現在のページURLをvar urlに。
splitで / 部分で分割しています。

つまり http://example.com/index.html
などのURLを / の記号部分で分割します。

その後にメニューのaタグURLと現在のページURLが同じであれば
activeというクラスを追加します。

document.URL.split('/'); で
0.http:
1.
2.example.com
3.index.html
以降4に続く・・・


のように分割してurl[3]などで取得しています。

これでメニューのaタグ部分と現在のURLが同じの場合は自動で
クラスが付加される事になります。

$('ul li a')の部分は各々メニューまでのaタグクラスが違うと思いますので
変更して下さい。

例えば$('ul#menu li a') という場合もあるかもしれませんし、
ulタグ自体違う場合もあるかもしれません。

基本的に値とクラス部分を変更すれば使用できますので
汎用性の高いjQueryコードかと。

もっと良い書き方があれば是非教えてください!


関連スクラップ記事

関連エントリ抽出中...
このエントリーをはてなブックマークに追加 Clip to Evernote

| コーディング | 23:09 | TOP↑

PREV | PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。