アプリ版：「スタンプのみでお礼する」機能のリリースについて

JS <a></a>タグ内のリンク先アドレスを取得して別の場所に挿入したいです。

解決済

  • 質問者：bombomrash
  • 質問日時：
  • 回答数：4件

質問です。html文書が以下のようにあり、
<ul class="test">
<li><a href="example1.html">example1</a></li>
<li><a href="example2.html">example2</a></li>
<li><a href="example3.html">example3</a></li>
<li><a href="example4.html">example4</a></li>
</ul>
example1.htmlからexample4.htmlのそれぞれのURL(実際にはパラメーターがついてその都度変動します)を取得して、そのURLを同じ文書内の別の場所にある<a></a>タグ内にそれぞれ挿入したいです。丸きりの素人で、色々と調べてみましたがずばり当てはまるものが見つかりません。
出来ましたらそのままコピペ出来るかたちでお教えいただけたら助かります。
どうぞよろしくお願いします。

質問者からの補足コメント

  • お返事有難うございます。コピペというのは語弊がありました。
    urlの取得はきっと、
    document.getElementsByClassName('test').children[0].getElementsByTagName('a')[0].getAttribute('href') (example1.htmlの取得)
    ということでできるのかと、調べております。
    別の場所の<a></a>内は、onclickイベントでよいのかなと思っています。
    つまり、JSの書き方がまるで分かっておりませんので、コピペというよりは、
    別の場所の<a></a>内をクリックしたときに、上記で取得したURLに遷移できる例文をご教授いただければとても助かります。

    No.1の回答に寄せられた補足コメントです。 補足日時：2018/08/29 08:33
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.2ベストアンサー

<!DOCTYPE html>


<meta charset="UTF-8">
<title>href or link</title>
<style>
</style>
<body>
<ul class="test">
<li><a href="example1.html">example1</a></li>
<li><a href="example2.html">example2</a></li>
<li><a href="example3.html">example3</a></li>
<li><a href="example4.html">example4</a></li>
</ul>

<p>
<a id="result" href="">Jump</a>
</p>

<script>

// a要素の取得
let a = document.querySelectorAll ('.test li a');

// a要素から href を抽出
let href = [...a].map (a => a.getAttribute('href'));

let rst = document.querySelector ('#result');

rst.textContent = href[2];
rst.href = href[2];

</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答有難うございます。早速試してみましたところ、意図した動きが確認できました。
ただ、CGIプログラム内のテンプレートで使用したところ、なぜか飛び先が403エラーとなってしまいました。
原因は勿論私には分かりません。また色々と試してみようと思います。どうもありがとうございました。

通報する
お礼日時：2018/08/30 13:17

No.4

  • 回答者： fujillin
  • 回答日時：

No3です。




今、気が付きましたが、No2様が既にjavascriptで実現する例を示してくださっていましたね。（気付くのが遅すぎ？(笑)）

ですので、そちらを利用することで、いかようにもできることと思います。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： fujillin
  • 回答日時：

No1です



＞別の場所の<a></a>内をクリックしたときに～～
<a>のマークアップはリンクの為のマークアップです。
ブラウザは、そこをクリックすると、aタグ内に記されたリンク先に遷移する機能を備えています。
そのリンクをわざわざ殺してまで、他へ遷移させるというのは本来のマークアップの主旨から外れていませんか？
自動車を運転するのに、「ハンドルを効かなくさせておいて、別のところにあるハンドルで運転したい」みたいなことになっているような気がします。
備えられている本来の機能を利用できない理由が何かあるのでしょうか？

＞それぞれのURL(実際にはパラメーターがついてその都度変動します)
遷移先が動的に変わるのであるなら、その処理の一環として、同時に「別のリンク」も変える仕組みにしておくのが妥当かと思いますけれど。
ご質問文を読む限りでは、どうもそういうことでも無いように思えますので・・・

＞JSの書き方がまるで分かっておりませんので～
わからないものを使うと、何かあったときに、まるきりのお手上げになるのが常ですけれど…？
（ちょっとした修正や変更、あるいは不具合等）
例えば、現状の情報だけをもとに一例を示したとしても、質問者様の実際の内容に適用する際にうまくいくのかどうかでも不明です。

＞別の場所の<a></a>内をクリックしたときに、上記で取得したURLに
＞遷移できる例文をご教授いただければとても助かります。
もちろんスクリプトで実現することも可能ですが、スクリプトをOFFにしているユーザはリンクをクリックしても、質問者様が意図するところとは別のページへ遷移することになってしまいます。


方法は異なりますし一般的とも思えませんが、以下は、同じリンクを「別のところ」に表示させた一例です。
（例なので、全部ひとまとめにして扱っていますけれど）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
.test>li { position:relative; }
.test>li>a::after{
content:"別のリンク"; text-decoration:underline;
position:absolute; top:20em; left:0;
}
</style>
</head>
<body>
<ul class="test">
<li><a href="example1.html">example1</a></li>
<li><a href="example2.html">example2</a></li>
<li><a href="example3.html">example3</a></li>
<li><a href="example4.html">example4</a></li>
</ul>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

色々と誤解があるようですが、私の説明不足ということで。
<ul class="test">
<li><a href="example1.html">example1</a></li>
<li><a href="example2.html">example2</a></li>
...</ul>
という文があって、このリンク先は動的に変化します。また、これはCGIで結果的に書き出される文書で、そのスタイルもプログラム内で指定されています。プログラムが意図している所定の位置に所定のかたちで書き出される分には何も問題ないのですが、同じページ内のいくつかの場所に、それぞれ異なるスタイルを指定した、複数の同じリンクを貼りたいわけです。プログラムそのものをいじる知識は勿論ありませんから、プログラムが書き出したリンク先を取得して、そこに飛べるスタイルの異なる<a>example1</a>を書きたいと思った次第です。プログラムの関係上、それぞれをスタイルシートでいじることは結構な手間と考えましたので。
ですので、別にハンドルがどうのという話ではありませんよ。
いずれにいたしましても、ご回答有難うございました。

通報する
お礼日時：2018/08/30 13:13

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



＞出来ましたらそのままコピペ出来るかたちでお教えいただけたら
「同じ文書内の別の場所にある<a></a>タグ内」というのを明示しないと、「コピペ」できるものは無理でしょう。
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報