質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    16982questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

JavaScriptでリンクを設定する方法について教えてください

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 179

ryuji0205

score -5

<script type="text/javascript">
    window.onload = function(){ var linkID = "contact_form"; // リンクを設定するタグのID
    var linkURL = "contact.html";
    var baseTag = document.getElementById(linkID);
    var link1 = baseTag.firstChild.nodeValue;
    var aTag = document.createElement("a");
    aTag.href = linkURL; aTag.appendChild(document.createTextNode(link1));
    baseTag.replaceChild(aTag, baseTag.firstChild); }
</script>

---------------------

<li id="contact_form">
    お問い合わせはコチラ
</li>

上記のようなコードでliをクリックした時に contact.htmlへ遷移するように設定したのですが、複数リンクを設定するのにjavascriptは どのように書けばよろしいでしょうか?

完成形は下のようなHTMLコードです。

<div id="top-nav">
    <ul>
        <li id="contact_form1">お問い合わせ1</li>
        <li id="contact_form2">お問い合わせ2</li>
        <li id="contact_form3">お問い合わせ3</li>
        <li id="contact_form4">お問い合わせ4</li>
        <li id="contact_form5">お問い合わせ5</li>
        <li id="contact_form6">お問い合わせ6</li>
    </ul>
</div>

すいません、私の説明足らずでしたので追記させていただきます↓
liのリンクはそれぞれ別の飛び先になります。

私がサンプルで書いた内容ですと
●「contact_form」と言うIDがついてるものは「contact.html」へリンク
ですが、↑の設定を活かしたままで
●『contact_form2』のIDがついたliをクリックした時『contact2.html』へリンクする
と言うリンク設定を増やしていきたい場合にはどうすればよいでしょうか?


さらに追記しました

<script type="text/javascript">
    window.onload = function(){ var linkID = "contact_form"; // リンクを設定するタグのID
    var linkURL = "contact.html";
    var baseTag = document.getElementById(linkID);
    var link1 = baseTag.firstChild.nodeValue;
    var aTag = document.createElement("a");
    aTag.href = linkURL; aTag.appendChild(document.createTextNode(link1));
    baseTag.replaceChild(aTag, baseTag.firstChild); }
</script>


<div id="top-nav" class="">
    <ul id="fixed-nav">
        <li id="contact_form">お問い合わせはコチラ</li>
        <li id="privacypolicy">プライバシーポリシー</li>
    </ul>
</div>


何度もすいません、あくまでサンプル用だったのでリンク先の名前などアテで行ってましたが、かえって混乱させてしまい申し訳ありません。。
上記が正規コードです、このコードでプライバシーポリシーのリンク設定をどのようにすればいいかご教授お願い致します。飛び先は「privacypolicy.html」にする予定です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

  • top-nav内のliを拾う
  • idがcontact_formxxx(xxxは数値)のものを拾う
  • 「contact_form」classを付けてそれを拾う

のどれかになるでしょう

 追記

とりあえず,top-navのliをひろってみます

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('#top-nav li'),function(x){
    var linkURL = "contact.html";
    var link1 = x.textContent;
    var aTag = document.createElement("a");
    aTag.setAttribute("href",linkURL)
    aTag.appendChild(document.createTextNode(link1));
    x.textContent="";
    x.appendChild(aTag);
  });
});
</script>
<div id="top-nav">
<ul>
<li id="contact_form1">お問い合わせ1</li>
<li id="contact_form2">お問い合わせ2</li>
<li id="contact_form3">お問い合わせ3</li>
<li id="contact_form4">お問い合わせ4</li>
<li id="contact_form5">お問い合わせ5</li>
<li id="contact_form6">お問い合わせ6</li>
</ul>
</div>

 修正

idのcontact_form以降の数値を利用してconctactxxx.htmlにリンクを張ればいいのですね?

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('#top-nav li'),function(x){
    var linkBasename = "contact";
    var linkExtension = ".html";
    var link1 = x.textContent;
    if(r=x.getAttribute('id').match(/^contact_form(.+)$/)){
      var aTag = document.createElement("a");
      aTag.setAttribute("href",linkBasename+r[1]+linkExtension)
      aTag.appendChild(document.createTextNode(link1));
      x.textContent="";
      x.appendChild(aTag);
    };
  });
});
</script>
<div id="top-nav">
<ul>
<li id="contact_form1">お問い合わせ1</li>
<li id="contact_form2">お問い合わせ2</li>
<li id="contact_form3">お問い合わせ3</li>
<li id="contact_form4">お問い合わせ4</li>
<li id="contact_form5">お問い合わせ5</li>
<li id="contact_form6">お問い合わせ6</li>
<li id="contact_form100">お問い合わせ100</li>
</ul>
</div>

 法則性がない

法則性がないなら、リストを羅列するしか無いですね

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('#top-nav li'),function(x){
    var links ={
      "contact_form":"contact.html",
      "privacypolicy":"privacypolicy.html",
    };
    var id=x.getAttribute("id");
    var reg=new RegExp("^"+Object.keys(links).join("|")+"$");
    if(id.match(reg)){
      var link1 = x.textContent;
      var aTag = document.createElement("a");
      aTag.setAttribute("href",links[id]);
      aTag.appendChild(document.createTextNode(link1));
      x.textContent="";
      x.appendChild(aTag);
    }
  });
});
</script>
<div id="top-nav">
<ul id="fixed-nav">
<li id="contact_form">お問い合わせはコチラ</li>
<li id="privacypolicy">プライバシーポリシー</li>
<li id="test">テスト</li>
</ul>
</div>

 ローレベル処理

念の為もっとローレベルな処理を書いておきます
これならIEの相当古いバージョンでも動作します

<script>
window.onload= function(){
  var obj=document.getElementById('top-nav').getElementsByTagName('li');
  for(var i=0;i<obj.length;i++){
    var x=obj[i];
    var links ={
      "contact_form":"contact.html",
      "privacypolicy":"privacypolicy.html"
    };
    var id=x.getAttribute("id");
    var str="";
    for(var j in links){
      if(str!=="") str+="|";
      str+=j;
    }
    var reg=new RegExp("^"+str+"$");
    if(id.match(reg)){
      var link1 = x.innerHTML;
      var aTag = document.createElement("a");
      aTag.setAttribute("href",links[id]);
      aTag.appendChild(document.createTextNode(link1));
      x.innerHTML="";
      x.appendChild(aTag);
    }
  };
};
</script>
<div id="top-nav">
<ul id="fixed-nav">
<li id="contact_form">お問い合わせはコチラ</li>
<li id="privacypolicy">プライバシーポリシー</li>
<li id="test">テスト</li>
</ul>
</div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/01 19:29

    申し訳ありません、javascriptの事があまりわかっていないので 具体的にどのようなコードを書けば良いか教えて頂けますでしょうか?

    キャンセル

  • 2018/05/01 19:41

    一例あげておきます。他の方法で実現したい場合はどうしたいか指示下さい

    キャンセル

  • 2018/05/01 19:54

    コードありがとうございます。
    申し訳ありません、私の説明不足でした、詳細を追記させていただきます。

    すいません、私の説明足らずでしたので追記させていただきます↓
    liのリンクはそれぞれ別の飛び先になります。

    私がサンプルで書いた内容ですと
    ●「contact_form」と言うIDがついてるものは「contact.html」へリンク
    ですが、↑の設定を活かしたままで
    ●『contact_form2』のIDがついたliをクリックした時『contact2.html』へリンクする
    と言うリンク設定を増やしていきたい場合にはどうすればよいでしょうか?

    キャンセル

  • 2018/05/01 20:01

    修正しました。意図と違うようなら再度ご指摘下さい

    キャンセル

  • 2018/05/01 20:12

    何度も何度ももうしわけありません、再度詳細を追記させて頂きましたのでご確認をお願い致します。

    キャンセル

  • 2018/05/01 20:18

    contact_formはcontact.htmlでprivacypolicyがprivacypolicy.htmlだと
    法則性が薄いですが
    もしほかにxxx_formがあればxxx.htmlになり、それ以外は
    idに.htmlをつければよいのでしょうか?

    キャンセル

  • 2018/05/01 20:23

    法則性が薄いのは重々承知です...既存サイトの仕様変更を急にふられてしまったのであまりいじれないの現状です(泣)

    現状、上記の2項目(コンタクトとプラポリ)のみで追加はなさそうです!

    キャンセル

  • 2018/05/01 20:35

    法則性がないものを仕様を明確にせず処理させるのは無理があります。
    一応リストを羅列する方法を提示しておきます

    キャンセル

  • 2018/05/01 20:48

    ソースのご共有ありがとうございます、やはり法則性などが必要なのですね..
    さっそく教えて頂いたソースを反映したのですが、こちらのソースですとリンクの反応がありませんでした..

    キャンセル

  • 2018/05/01 20:51 編集

    WinならIE9以上、Firefox、chromeで動作確認はしてあります。
    (全文をそのままコピペして試して下さい)
    動かない場合は具体的なOSとブラウザの種類、バージョンなど
    提示したほうがよいでしょう

    キャンセル

  • 2018/05/01 21:38

    こちらはwindows10 Firefox 59.0.2 (64 ビット)と表示されております。
    すべてコピペしたのですが...

    キャンセル

  • 2018/05/01 21:51

    例えば「法則性がない」セクションに提示したソース
    <script>から</div>までコピペで適当な名前でhtmlを保存するだけですよ
    F12をおして開発画面をみたときコンソールにエラーは表示されますか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16982questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。