jqueryでディレクトリ（ページ）のハイライト

2023/08/15 23:55

このQ&Aのポイント

jqueryを使用して、指定されたディレクトリ（ページ）をハイライトする方法について教えてください。
また、現在のディレクトリ（ページ）を取得する方法と、クラスの追加とリンクの削除方法も知りたいです。
お手数ですが、アドバイスをお願いします。

ベストアンサー

jqueryで　ディレクトリ（ページ）のハイライト

2012/01/18 15:44

<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」を使って現在位置の取得はできるのですがクラスの追加とリンクの削除方法が分からず詰まってしまっています。よろしくお願いします。

wish46
お礼率57% (4/7)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

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

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2012/01/18 16:30 回答No.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>

関連するQ&A

sedで特定行を抽出したいです
はじめまして、下記のようなファイルがあり、sedで特定文字列(@@@, @@@@, @@@@@)を含む行のみを一回で抽出したいです。 sed -n -e "/p=300/,/eee/p" input > output' だと不要な行も入ってしまいます orz... sedはWindows上のsed Logos 2.42を使用しています。どのように書けば対象行のみを抽出できるか、ご教授をお願いいたします。 [ 読込み対象ファイル ] ***, @@@, @@@@, @@@@@は雑多な文字列最初に不要な行が10～15行 <div class="aaa"> <a href="http://www.***.***/?p=300&***">@@@</a> </div> <div class="bbb"> <ul class="ccc"> <li class="ddd">@@@@</li> <li class="eee">@@@@@</li> <div class="aaa"> <a href="http://www.***.***/?p=300&***">@@@</a> </div> <div class="bbb"> <ul class="ccc"> <li class="ddd">@@@@</li> <li class="eee">@@@@@</li> 以下<div class="aaa">から<li class="eee">@@@@@</li>まで20回繰り返し。
- ベストアンサー
- Linux系OS
jqueryで要素の獲得方法
jqueryについてお聞きしたします。下記のようなソースで <div class="sideBox"> <div class="sideBoxHead"> ・・・ </div> <div class="sideBoxInner basename"> <ul><li class="on"><span title="main title">aaa</span></li> <li><a href="html1" title="title1">bbb</a></li> <li><a href="html2" title="title2">bbb</a></li> ：： <li class="last"><a href="htmlX" title="titleX">zzz</a></li> </ul></div> </div> "title2"をクリックした時の"html2"を獲得したいのですが $("div.sideBox > div > ul > li > a").click(function(){ var value = this.href; console.log("varlue = " + value); }); としても値が獲得できません。直接"sideBoxInner basename"classからたどれば上手くいくような気がするのですがクラス名に半角スペースがある場合、どのようにすればいいのでしょうか？
- 締切済み
- JavaScript
jqueryで要素の中身を要素の外に出す方法
教えを貸してください。 jQueryを使って、要素を追加したり、削除したりしています。このようなHTMLがあります。 <div class="fast"> 　<div class="second"> 　　<p><a href="goo.ne.jp">goo</a></p> 　</div> 　<div class="second"> 　　<p><a href="yahoo.co.jp">yahoo</a></p> 　</div> 　<div class="second"> 　　<p><a href="google.co.jp">google</a></p> 　</div> </div> このとき、yahooへのリンクを含む<div>から外したいのです。 <div class="fast"> 　<div class="second"> 　　<p><a href="goo.ne.jp">goo</a></p> 　</div> 　<p><a href="yahoo.co.jp">yahoo</a></p> 　<div class="second"> 　　<p><a href="google.co.jp">google</a></p> 　</div> </div> 対象となるdivとその中身を取得することはできています。そのdivを消して、divのあった場所に挿入する。という方法に悩んでいます。良い方法がありましたら、教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
Jquery タブで、４つのliのうち、ひとつだけ除外
お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
HTML トップページから各ページへのタグの作り方
ホームヘージを作っていますが、ド素人で分かりません。教えてください。 http://webz.jugem.jp/?tid=12 上記のようなホームページを作るのですが、「menu1」のボタンから新しいページを作りたいのですが、どのようなタグを使えばよいのでしょうか? 下記はトップページの一部分です。次のページに移動するにはどこへそのタグを書き込めば良いでしょうか？ <div class="header"><p class="description">{blog_description}</p></div> <div class="navigation"> <a href="./" id="active">Home</a> <a href="./#top">menu1</a> <a href="./#top">menu2</a> <a href="./#link">Link</a> <a href="./?pid=1">Profile</a> <div class="clearer"></div> </div>
- ベストアンサー
- その他([技術者向] コンピューター)
ＮＮでだけリストの一番上の項目がずれます。
IE、Opera、Firefox　では問題なく表示されますが、Netscapeでだけ、リストの最初の項目の位置がずれます。　どうやら、ＣＳＳの li {margin: 0; padding: 4px;} が反映されていないようです。 <div id="xxx"><a name="aaa" /> 　　 　　<div class="navi"> 　　　　<ul> 　　　　　　<li><a href="#aaa">ホーム</a></li> 　　　　　　<li><a href="#bbb">あいう</a></li> 　　　　　　<li><a href="#ccc">えおか</a></li> 　　　　</ul> 　　</div> 　　 　　<div class="content">中身</div> </div> 「ホーム」がずれます。　正しく反映させる方法はありますでしょうか？
- ベストアンサー
- ブログ
jQueryでdivごとリンクする際の開き方の指定
jQueryでdivごとリンクする際に新しいウィンドウで開くものと、同じウィンドウで開くものを分けたいのです。下にコードを載せています。素人なりにおかしいかと思っている点は、同じfunction()を続けて使っているところです。 2つのスクリプトをそれぞれ1つだけ書いた時はうまく動作します。どのように書いたらよいでしょうか？よろしくお願いいたします。 ●新しいウィンドウで開きたいdiv要素 aaa,bbb,ccc ●同じウインドウで開きたいdiv要素 ddd,eee ------------------------------------------- <script type="text/javascript"> $(function(){ $(".aaa,.bbb,.ccc").click(function(){ window.open ( $(this).find('a').attr('href'), 'newwin' ); return false; }); }); </script> <script type="text/javascript"> $(function(){ $(".ddd,.eee").click(function(){ window.open ( $(this).find('a').attr('href'); return false; }); }); </script> -------------------------------------------
- ベストアンサー
- JavaScript
jQueryタブメニュー内へのリンク方法。
javascript勉強中です。調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。下記のjQueryを使ったタブメニューなのですが、他のページからタブ内（tab1～tab3）へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
写真の上0pxにタイトルバーをhtmlで作りたい
HTMLで写真の真上にhtmlで作った色付き棒の中に文字を表現したいです。それを３列ずつ複数行作成したいです。・写真と写真の横幅の間は30pxあける。・上下は50pxあける。・ウインドウ幅の中央に常に表示・ウインドウが写真よりも狭くなってもレイアウトが崩れないこのようにしたいと思って、自分で作ってみましたが、まったくうまくできませんでした。どのようにすればいいのか教えて下さい。よろしくお願いいたします。～～～～～～　HTML　～～～～～～～ <link href="aa.css" rel="stylesheet" type="text/css" /> <div class="aaa"> <div class="bbb">いのしし<div> <div class="bbb">たつ<div> <a href="" ><img src="" alt="" width="350" height="270" /></a> <a href="" ><img src="" alt="" width="350" height="270" /></a> <div class="ccc">うさぎ<div> <div class="ccc">とら<div> <div class="ccc">たぬき<div> <a href="" ><img src="" alt="" width="232" height="166" /></a> <a href="" ><img src="" alt="" width="232" height="166" /></a> <a href="" ><img src="" alt="" width="232" height="166" /></a> </div> ～～～～～～　CSS　～～～～～～～ @charset "Shift_JIS"; a img{ border:none; } div.aaa{ margin-top:0px; width:760px; margin-left:auto; margin-right:auto; text-align:center; } div.bbb{ background-color: #ffcc66; width: 350px; height: 30px; } div.ccc{ background-color: #ffcc66; width: 232px; height: 30px; font-size: 20px; font-color: }
- ベストアンサー
- HTML
Firefox のバグ？ネスト時のレンダリングについて。
Firefox のバグかと思い調べたのですが、調べ方が悪いのか解決策を見出すことができませんでした。問題ですが、まず以下のHTMLソースをコーディングしました。これを iframe.html として、別のファイルから参照させます。 ■iframe.html の中身 <style type="text/css"> .Link{font-size:10px;color:blue;cursor:hand;} .Title{font-size:14px;color:#000;} .Text{font-size:12px;color:#000;} </style> <table> <tr> <td> <a href="Link1" class="Link"> <div class="Title">text</div> <div class="Text">text</div> </a> </td> <td> <a href="Link2" class="Link"> <div class="Title">text</div> <div class="Text">text</div> </a> </td> </tr> </table> ■別ファイルの中身 <body> <iframe src="iframe.html"></iframe> </body> なぜこういう構造になっているかというと、まず a タグのアンカー機能を子要素に継承させ、その中の a タグにネストされるどの部分をクリックしてもリンク先を同じにしたいからです。 IE,Opera等では問題ないのですが、Windows版 Firefox2　で確認し、何度もリロードしているとたまに、　.Title　と .Text が効いてないような表示になります。それも必ず後に記述されている td 側の中身が。はてな、と思いFirebugでみてみると、以下のようにレンダリングされていました。 <a href="Link2" class="Link"> <div class="Title"><a href="Link2" class="Link">text</a></div> <div class="Text"><a href="Link2" class="Link">text</a></div> </a> この原因がわかりません。以下のような構造にして、 <div> <div class="Title"><a href="Link2" class="Link">text</a></div> <div class="Text"><a href="Link2" class="Link">text</a></div> </div> CSSを編集すれば解決することなのですが、　Link2　のURLは非常に長く何回もアンカータグを記述するのは避ける必要がありました。どうかよろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)