« .htaccessを使ってスマホサイトとPCサイトの切り分ける方法 | メイン | 【MT】ウェブページに「ウェブページと同じタグを持つブログ記事」の一覧を表示させる方法 »

jqueryを使って、現在いるページのリンクにクラス名を追加する方法

ホームページのユーザビリティを高めるために、現在表示しているページへのリンクにクラス名を追加する方法です。

意外に簡単でした。

たとえば以下のようなソースがあったとします。


    <ul>
        <li><a href="http://aaa.html">AAA</a></li>
        <li><a href="http://bbb.html">BBB</a></li>
        <li><a href="http://ccc.html">CCC</a></li>
        <li><a href="http://ddd.html">DDD</a></li>
       </ul>

現在AAAというページを表示しているときに、リンクメニューの中の今自分がいる場所へのリンクをハイライトさせたい場合に、jQueryを使って、リンクタグに class="current"とい値を自動的に追加する方法です。

<li><a href="http://aaa.html" class="current">AAA</a></li> ← というようにしたい

 

 

 

以下のスクリプトを</head>の手前に記述します。

<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7");</script>
<script>
$(function(){
$('a[href="' + window.location + '"]').addClass('current');
});
</script>

 

 

 

後はスタイルシートで修飾、文字色などを設定します

ul li a.current,{
    text-decoration: underline;
}

 

 

 

参考にさせていただいたサイトはこちら

工事・障害情報 (1)
パソコン (13)
フレッツ光プレミアム (3)
ホームページ作成 (8)
ウイルス・スパム対策 (6)
EC-CUBE (12)
Movable Type (11)
接続 (4)
機能 (1)
料金 (1)

About

2013年06月12日 16:45に投稿されたエントリーのページです。

ひとつ前の投稿は「.htaccessを使ってスマホサイトとPCサイトの切り分ける方法」です。

次の投稿は「【MT】ウェブページに「ウェブページと同じタグを持つブログ記事」の一覧を表示させる方法」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Powered by
Take-net Service