[jquery&JS]現在のファイル名を取得してカレントクラスを追加

●参考サイト
カレントページに来た時に色が変わるjQueryを作ってみました。
http://webdesignfactory.schoolbus.jp/20130217/

( Javascript )現在開いているWebページファイル名を取得する【location.href、lastIndexOf】
http://asobicocoro.com/tips/article/48

 

<script>

//現在ページURL取得
function GetFileName(file_url) {
file_url = file_url.substring(file_url.lastIndexOf("/") + 1, file_url.length)
return file_url;
}

//代入
var file_name = GetFileName(location.href);

//クラス追加
$(function(){
$(".nav ul li a").each(function() {
if($(this).attr("href") == file_name || $(this).attr("href") == "./" + file_name) {
$(this).addClass("on");
}
});
});

</script>

 

●URLが取得できているかの確認
<script language="JavaScript">
document.write(location.href);
document.write(GetFileName(location.href));
</script>

 

 

今回は使わなかったけど別件で使えそうな参考サイト(スラッシュで終わるURLでのカレント取得…かな?)
http://blog.creamu.com/mt/2012/08/classcurrent.html

スマホページ 横スライドページ形式の参考サイト

ずっと何がしか面倒そーややこしそーで避けていたスマホコーディングにもとうとう手を出さないといけなくなりまして...

今回はこの方法じゃないので、使わないのですが

今後役にたつと思うので(というか作ってみたいので)φ(・ェ・o)~メモメモ

【jQuery mobile でまず押さえておきたいページ構造】
http://billboardtop100.net/BLOG/jquery-mobile/cat26/

[Jquery]スマホ対応のイメージスライダー[Flexslider]

スマホ案件で既存で使われてたスライダーがうまく作動しないってことだったのでこちらに切替。

スワイプもフリックも使わない単純なイメージスライダーが良かったので、軽いし導入もらくらくでした。

[Flexslider]
http://www.woothemes.com/flexslider/

導入方法は下記を参考しました
http://sterfield.co.jp/designer/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E5%AF%BE%E5%BF%9C%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC.html

[jquery]クリックでアクティブ追加

他のメニューをクリックした場合は解除の後、クラス追加

<script type="text/javascript">

jQuery(document).ready(function(){

$("#navigation li").click(
function(){
$("#navigation li").removeClass('active');
$(this).addClass("active");
}
);
});

</script>