JavaScriptでaddclassが上手くいきません

ページ内に現在のurlと同じリンクがあった場合そのリンクをハイライト表示させようとしています。その場合だけクラスを追加し、そのクラスに対してCSSで背景を黄色にしています。(クラス名はcurrentにしています)
<style>
.current { background:yellow; !important;}
</style>
参考サイト:
http://aroun-d.com/2012/04/10/3803/

参考サイトのコードで実現できたのですが、問題は画面変移のない【IDを使ったページ内リンク】の場合上手くいかない事です。(test.com#id1 のような変移のないページ内リンク)
また、上記はIEのみでしか動作せず、Firefoxやchromeの場合動作しません。
下記のサイト(例3)ではIDを使ったページ内リンクでも、IE以外のブラウザでも動作しています。
http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_slider/coda_slider.inc#2

大変困っておりますので上手くいくようにご教授頂けないでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/12/09 16:21:13
  • 終了:2012/12/09 17:28:07

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4584ベストアンサー獲得回数19242012/12/09 17:20:29

ポイント200pt

URL のハッシュ以外が元のページと同じ場合、ページのリロードが発生しないので、$() のロジックが呼び出されないのがうまくいかない原因だと思います。
addClass を呼び出すロジックを、ページのロード時と、a タグの onclick のときに動作させるようにすれば、期待通りの動きをすると思います。

以下、元のコードを尊重して変更してみました。

$(function(){
    // クラスを変更するロジックをクロージャにする
    var add_class_function = (function() {
        return function(loc) {
            $('#mainnavi li a').each(
                function(){
                    // id 表現が無いリンクが入ってると誤動作するので、$ を追加する
                    var $href = new RegExp($(this).attr('href') + '$');
                    if(loc.match($href)) {
                        $(this).addClass('selected');
                    } else {
                        $(this).removeClass('selected');
                    }
                });
            }
        })();

    // onclick にハンドラを追加する
    $('#mainnavi li a').click(function() {
            add_class_function(this.href);
        });

    // ページをロードしたときの動作
    add_class_function(location.href);
});
id:ty2016

ご回答ありがとうございます。
思った通りの動作ができましたので、ベストアンサーにさせて頂きます。
この度は素晴らしい回答をありがとうございました。

2012/12/09 17:27:40

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/12/09 16:33:27

ポイント100pt

リンク先と現在のURLを比較する際に#以下を除去するとか。

<script type="text/javascript">
$(function(){
$('#mainnavi li a').each(function(){
var $href = $(this).attr('href'); //リンクもIDが付いているなら.replace(/#.*/,'')
if(location.href.replace(/#.*/,'').match($href)) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
});
</script>
他7件のコメントを見る
id:Cherenkov

<a href="./サイトURL#id1">だとコピペで動作確認できないので更に単純化していただけると問題が把握しやすいです

2012/12/09 17:27:49
id:Cherenkov

現在のURLはどうなってますか。example.comなのかexample.com#id1なのか。
id名のルールに問題はないか。
参考: http://q.hatena.ne.jp/1336967874

2012/12/09 17:33:03
id:ty2016

コードは下記になります。
小文字がどうとかそういう系のミスはありません。(IDを使ったページ内リンク以外では動作しているわけですから)

問題は下記の「事業内容」をクリックしても黄色くハイライトされないことです。
(F5キーで再読み込みすると上手くいきますがそれは望む動作ではありません)
<html>

<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>


$(function(){ $('.menu li a').each(function(){ // リンク先のURLを取得 var url = $(this).attr('href'); // 現在表示されているページのURLを取得し、リンク先のURLと照合 if(location.href==url) { // マッチすれば、「class="current"」を付加 $(this).addClass('current'); // マッチしなければ、「class="current"」を削除 } else { $(this).removeClass('current'); } });});</script>
</head>


id:a-kuma3 No.2

a-kuma3回答回数4584ベストアンサー獲得回数19242012/12/09 17:20:29ここでベストアンサー

ポイント200pt

URL のハッシュ以外が元のページと同じ場合、ページのリロードが発生しないので、$() のロジックが呼び出されないのがうまくいかない原因だと思います。
addClass を呼び出すロジックを、ページのロード時と、a タグの onclick のときに動作させるようにすれば、期待通りの動きをすると思います。

以下、元のコードを尊重して変更してみました。

$(function(){
    // クラスを変更するロジックをクロージャにする
    var add_class_function = (function() {
        return function(loc) {
            $('#mainnavi li a').each(
                function(){
                    // id 表現が無いリンクが入ってると誤動作するので、$ を追加する
                    var $href = new RegExp($(this).attr('href') + '$');
                    if(loc.match($href)) {
                        $(this).addClass('selected');
                    } else {
                        $(this).removeClass('selected');
                    }
                });
            }
        })();

    // onclick にハンドラを追加する
    $('#mainnavi li a').click(function() {
            add_class_function(this.href);
        });

    // ページをロードしたときの動作
    add_class_function(location.href);
});
id:ty2016

ご回答ありがとうございます。
思った通りの動作ができましたので、ベストアンサーにさせて頂きます。
この度は素晴らしい回答をありがとうございました。

2012/12/09 17:27:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません