- ベストアンサー
jqueryでディレクトリ（ページ）のハイライト
- jqueryを使用して、指定されたディレクトリ（ページ）をハイライトする方法について教えてください。
- また、現在のディレクトリ（ページ）を取得する方法と、クラスの追加とリンクの削除方法も知りたいです。
- お手数ですが、アドバイスをお願いします。
- wish46
- お礼率57% (4/7)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 ディレクトリの階層を作るのは面倒だったので一部固定でのサンプルですが以下のようにすれば実装できると思います。 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>
