ページ内に現在の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
大変困っておりますので上手くいくようにご教授頂けないでしょうか？
No.2
4973
2154
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); });
No.1
1504493
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>
＜a href="./サイトURL#id1">だとコピペで動作確認できないので更に単純化していただけると問題が把握しやすいです
現在のURLはどうなってますか。example.comなのかexample.com#id1なのか。
id名のルールに問題はないか。
参考： http://q.hatena.ne.jp/1336967874
コードは下記になります。
小文字がどうとかそういう系のミスはありません。(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>
No.2
49732154
ここでベストアンサー
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); });
ご回答ありがとうございます。
思った通りの動作ができましたので、ベストアンサーにさせて頂きます。
この度は素晴らしい回答をありがとうございました。
28
28
1
1
ご回答ありがとうございます。
2012/12/09 17:27:40思った通りの動作ができましたので、ベストアンサーにさせて頂きます。
この度は素晴らしい回答をありがとうございました。