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
大変困っておりますので上手くいくようにご教授頂けないでしょうか？
ベストアンサー
-
a-kuma3
満足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); });
-
その他の回答
-
Cherenkov
満足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>
-
-
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>
<script type="text/javascript"></p> <p>$(function(){</p> <p> $('.menu li a').each(function(){</p> <p> // リンク先のURLを取得</p> <p> var url = $(this).attr('href');</p> <p> // 現在表示されているページのURLを取得し、リンク先のURLと照合</p> <p> if(location.href==url) {</p> <p> // マッチすれば、「class="current"」を付加</p> <p> $(this).addClass('current');</p> <p> // マッチしなければ、「class="current"」を削除</p> <p> } else {</p> <p> $(this).removeClass('current');</p> <p> }</p> <p> });</p> <p>});</p> <p></script>
</head>
<style></p> <p> .current { background:yellow; !important;}</p> <p> </style>
この質問へのコメント
質問の情報
- 登録日時
- 2012-12-09 16:21:13
- 終了日時
- 2012-12-09 17:28:07
- 回答条件
- 1人5回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
同じような体験をしたことがある人はいますか？。 ある日、お葬式の職業に就きたいなあなんて話題にしてい…
匿名質問者
1
-
１９８４年から１９９０年ぐらいの間に、多分コミックボンボンに掲載されていた漫画を教えてください。 主…匿名質問者
2
-
https://hikky-mura.org/t/topic/2523/7 でsma200さんという方に戸塚ヨットスクールを勧められましたが、僕…
hayakushinene
1
-
いつも大変お世話になっています。 アスペルガー精神3級独身会社員34歳男です。 最近心身共に疲れがもの凄…hayakushinene11
-
私の彼氏は毒親育ちで、うつ病を患い、家を追い出された後ホームレスになって、現在は何故か逮捕されて留置…匿名質問者1