こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

jqueryで ディレクトリ(ページ)のハイライト

<div id="tab">
<div class="tab"><a href="/aaa/aaa/">あああ</a></div>
<div class="tab"><a href="/aaa/bbb/">いいい</a></div>
<div class="tab"><a href="/aaa/ccc/">ううう</a></div>
</div>

このようなリンクがあり 
例えば現在のページが /aaa/bbb/ を開いている時
<div class="tab"><a href="/aaa/aaa/">あああ</a></div>
<div class="tab no_link">いいい</a>
<div class="tab"><a href="/aaa/ccc/">ううう</a></div>
</div>
このようにクラスの追加とリンクを削除(?)するにはどうすればいいのでしょうか?

http://www.webopixel.net/javascript/416.html
こちらの 「url-parser」を使って現在位置の取得はできるのですが
クラスの追加とリンクの削除方法が分からず詰まってしまっています。

よろしくお願いします。

投稿日時 - 2012-01-18 15:44:26

QNo.7251896

すぐに回答ほしいです

質問者が選んだベストアンサー

こんにちは。

ディレクトリの階層を作るのは面倒だったので一部固定でのサンプルですが以下のようにすれば実装できると思います。
urlの値を変えてみると、合致したリンクがハイライトされ、リンククリックが出来ないようになることが確認できると思います。




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqueryで ディレクトリ(ページ)のハイライト</title>
<style type="text/css">
.nolink { background-color:#fcc }
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery','1');</script>
<script type="text/javascript">
$().ready ( function() {
// ここは実際にはurl-parserで取得
var url = "/aaa/bbb/";
// #tabの.tabの下にあるaを取得
$('#tab .tab > a').each ( function(index) {
var $obj = $(this);
// 取得したaタグのhrefを参照しurlと同じかチェック
if ( url === $obj.attr('href') ) {
// 親のdivタグに対してnolinkクラスを追加(背景色が変わる)
$obj.parent().addClass ( 'nolink' );
// 取得したaタグのhref属性を削除
$obj.removeAttr('href');
}
});
});
</script>
</head>
<body>
<div id="tab">
<div class="tab"><a href="/aaa/aaa/">あああ</a></div>
<div class="tab"><a href="/aaa/bbb/">いいい</a></div>
<div class="tab"><a href="/aaa/ccc/">ううう</a></div>
<div class="tab"><a href="/TEST/">TEST</a></div>
</div>
</body>
</html>

投稿日時 - 2012-01-18 16:30:08

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問