人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: ty2016
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●100ポイント

リンク先と現在の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>

Cherenkovさんのコメント
コピペで再現できるソースコードを提示したほうが問題を共有しやすく解決が早いのでオススメです。

Cherenkovさんのコメント
.current { background:yellow; !important;} yellowの後のセミコロンが余計ではありませんか?

Cherenkovさんのコメント
addClassのcが小文字のせいとか

Cherenkovさんのコメント
idでリンクしてるからhrefと同じではないせいか

Cherenkovさんのコメント
var url = $(this).attr('href'); を var url = this.href; にするとどうでしょうか

ty2016さんのコメント
>var url = $(this).attr('href'); を var url = this.href; にするとどうでしょうか 上記を試したところやはりF5キーで再読み込みしないと動作しませんでした。

Cherenkovさんのコメント
まず、yellowの後のセミコロンは余計です。除去してください。 >> ページ内に現在のurlと同じリンクがあった場合そのリンクをハイライト表示させようとしています。その場合だけクラスを追加し、そのクラスに対してCSSで背景を黄色にしています。(クラス名はcurrentにしています) << と >> 問題は下記の「事業内容」をクリックしても黄色くハイライトされないことです。 << が矛盾しているような…。 補足に提示されたコードでどのような動作を期待するのか、もう一度整理して説明してもらったほうが回答がつきやすいかと思います。

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

Cherenkovさんのコメント
現在の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>


$(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>



2 ● a-kuma3
●200ポイント ベストアンサー

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);
});

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ