# 先ほど、補足投稿したときに質問の受付を停止したままでした。
# 回答しようとしてくださった方々、大変申し訳ありませんでした。
# 質問文と補足を訂正したうえで再度投稿させていただきます。
htmlは補足のほうに記入します。
サイト上に
【html1】
が表示されています。
たとえば現在のアドレスがhttp://www.xxx.com/11b.html?page=123&id=456のとき、javascriptで
【html2】
となるようにしたいのですが、このような動作を行うにはどういうコードを追加すればいいのかを教えてください。
ulやliのidは適当ですので、ulにもidを定めたほうがいいとかいう場合は適当に改変してかまいません。
アドレスはサブドメインとファイル名のみ変わります。
正規表現でいうところの、次のような形になります。
http://(.+?).xxx.com/(.+?).html(+ある場合はGETパラメータ)
私はjavascriptは勉強中で、与えられたコードを調べつつ改変する技能はありますが、1から作るには時間がかかりすぎます。
ですのでこのような動作を行うjavascriptコードの模範解答が知りたいです。
よろしくお願いいたします。
html1
<body> <div> <div> <ul> <li id="t1"><a href="http://www.xxx.com/">11</a></li> <li id="t1"><a href="http://aaa.xxx.com/">22</a></li> <li id="t1"><a href="http://bbb.xxx.com/">33</a></li> </ul> </div> <div> <ul> <li id="t2"><a href="http://www.xxx.com/11a.html">aaa</a></li> <li id="t2"><a href="http://www.xxx.com/11b.html">bbb</a></li> <li id="t2"><a href="http://www.xxx.com/11c.html">ccc</a></li> </ul> </div> </div> </body>
html2
<body> <div> <div> <ul> <li id="t1"><a class="active" href="http://www.xxx.com/">11</a></li> <li id="t1"><a href="http://aaa.xxx.com/">22</a></li> <li id="t1"><a href="http://bbb.xxx.com/">33</a></li> </ul> </div> <div> <ul> <li id="t2"><a href="http://www.xxx.com/11a.html">aaa</a></li> <li id="t2"><a class="active" href="http://www.xxx.com/11b.html">bbb</a></li> <li id="t2"><a href="http://www.xxx.com/11c.html">ccc</a></li> </ul> </div> </div> </body>
jQuery 使ってます。単純なコードを目指しました。
<html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { var loc = location; var pat1 = loc.protocol + "://" + loc.host + "/"; var pat2 = loc.protocol + "://" + loc.host + loc.pathname; $('a[href="' + pat1 + '"]').addClass("active"); $('a[href="' + pat2 + '"]').addClass("active"); }); </script> <body> <div> <div> <ul> <li id="t1"><a href="http://www.xxx.com/">11</a></li> <li id="t1"><a href="http://aaa.xxx.com/">22</a></li> <li id="t1"><a href="http://bbb.xxx.com/">33</a></li> </ul> </div> <div> <ul> <li id="t2"><a href="http://www.xxx.com/11a.html">aaa</a></li> <li id="t2"><a href="http://www.xxx.com/11b.html">bbb</a></li> <li id="t2"><a href="http://www.xxx.com/11c.html">ccc</a></li> </ul> </div> </div> </body> </html>
HTML の部分は、質問にあるものをそのまま使いました。
下記のJavaScriptをお試しください。
呼び出されたURLはlocation.hrefに格納されます。
これに対して正規表現によるマッチングを行うことで
html2とhtml1を表示しています。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript"> <!-- re = new RegExp("page=123&id=456$", "i"); if (location.href.match(re)) { document.write("html2"); } else { document.write("html1"); } --> </script> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script> window.addEventListener('load', init, false); function init() { var matches = location.href.match(/http:\/\/([^.]+\.xxx\.com)\/([^.]+\.html)/); if (matches[1]) { var subdomain = matches[1]; //www.xxx.comなどが入る //ul.subdomainの子孫のaのうち、hrefにwww.xxx.comなどを含むものをひとつ探す document.querySelector('ul.subdomain a[href*="' + subdomain + '"]').classList.add('active'); } if (matches[2]) { var filename = matches[2]; //11b.htmlなどが入る document.querySelector('ul.filename a[href*="' + filename + '"]').classList.add('active'); } } // IE9とかでも動くようにjQuery使った。 // $(function(){ // var matches = location.href.match(/http:\/\/([^.]+\.xxx\.com)\/([^.]+\.html)/); // if (matches[1]) { // var subdomain = matches[1]; // $('ul.subdomain a[href*="' + subdomain + '"]').addClass('active'); // } // if (matches[2]) { // var filename = matches[2]; // $('ul.filename a[href*="' + filename + '"]').addClass('active'); // } // }); </script> <style type="text/css"> .active { font-weight: bold; color: pink;} </style> </head> <body> <div> <div> <ul class="subdomain"> <li><a href="http://www.xxx.com/">11</a></li> <li><a href="http://aaa.xxx.com/">22</a></li> <li><a href="http://bbb.xxx.com/">33</a></li> </ul> </div> <div> <ul class="filename"> <li><a href="http://www.xxx.com/11a.html">aaa</a></li> <li><a href="http://www.xxx.com/11b.html">bbb</a></li> <li><a href="http://www.xxx.com/11c.html">ccc</a></li> </ul> </div> </div> </body> </html>
jQuery 使ってます。単純なコードを目指しました。
<html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { var loc = location; var pat1 = loc.protocol + "://" + loc.host + "/"; var pat2 = loc.protocol + "://" + loc.host + loc.pathname; $('a[href="' + pat1 + '"]').addClass("active"); $('a[href="' + pat2 + '"]').addClass("active"); }); </script> <body> <div> <div> <ul> <li id="t1"><a href="http://www.xxx.com/">11</a></li> <li id="t1"><a href="http://aaa.xxx.com/">22</a></li> <li id="t1"><a href="http://bbb.xxx.com/">33</a></li> </ul> </div> <div> <ul> <li id="t2"><a href="http://www.xxx.com/11a.html">aaa</a></li> <li id="t2"><a href="http://www.xxx.com/11b.html">bbb</a></li> <li id="t2"><a href="http://www.xxx.com/11c.html">ccc</a></li> </ul> </div> </div> </body> </html>
HTML の部分は、質問にあるものをそのまま使いました。
ulにclassつけたり修正しました。
2013/03/16 19:15:51これだとサブドメインがマッチしない場合、ファイル名のほうが動作しないな
2013/03/16 20:28:44