javascriptでURIに応じてクラスを追加したい


# 先ほど、補足投稿したときに質問の受付を停止したままでした。
# 回答しようとしてくださった方々、大変申し訳ありませんでした。
# 質問文と補足を訂正したうえで再度投稿させていただきます。


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コードの模範解答が知りたいです。

よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/03/19 19:36:35
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
id:sloto

質問者から

sloto2013/03/16 16:20:37

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>

ベストアンサー

id:a-kuma3 No.3

回答回数4971ベストアンサー獲得回数2153

ポイント75pt

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 の部分は、質問にあるものをそのまま使いました。

その他の回答2件)

id:oil999 No.1

回答回数1728ベストアンサー獲得回数320

下記の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>
id:Cherenkov No.2

回答回数1504ベストアンサー獲得回数493

ポイント25pt
<!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>
他1件のコメントを見る
id:Cherenkov

ulにclassつけたり修正しました。

2013/03/16 19:15:51
id:Cherenkov

これだとサブドメインがマッチしない場合、ファイル名のほうが動作しないな

2013/03/16 20:28:44
id:a-kuma3 No.3

回答回数4971ベストアンサー獲得回数2153ここでベストアンサー

ポイント75pt

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 の部分は、質問にあるものをそのまま使いました。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません