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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

8526閲覧

aタグの一部javascriptでの変更について

JimmyKing2001

総合スコア15

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/03/17 08:56

こんにちは、アドレスの一部をjavascriptで変更したいですが、ググってもなかなか良い回答出なくて質問させていただきます。

<a href="http://hello.com/123/abc.html"> <a href="http://hello.com/123/cde.html"> <a href="http://hello.com/123/efg.html"> . . .

があるとして、

<script> function getDir(place, n) { return place.pathname.replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((n || 0) + 1) + "}$"), "/");} </script>

動かないコード
<a href="javascript:document.write(getDir(window.location))"+"abc">
//動的にパスを取得したいです

もちろんjavascriptの中に+"abc"などを入れると出来ますが、そうするといっぱいあるので置き換えは大変そうです。hrefの中で連結の方法やこの問題を簡単に解決できる方法があればご教授いただけますでしょうか。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

HTML

1<a href="javascript:window.location.href=getDir(window.location)+'abc.html'">

ってことですか?

でも、これって、

HTML

1<a href="abc.html"> 2```ってことですよね?

投稿2016/03/17 10:24

編集2016/03/18 01:27
shi_ue

総合スコア4437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

JimmyKing2001

2016/03/17 10:47

ご回答どうもありがとうございます。確かにそう言われるとそうです。相対パスで書けばよかったですね。帰ったら試してみます。
guest

0

解決したみたいで良かったです。
相対パスで良いのか!そうか、そうですよね・・・


完全に蛇足ですが、

「javascriptでhrefを書き換えるのではなく、画面遷移自体をjavascriptで行う」

というの手もあるなと思ったので 一応残しておきます。

もし「ルート部分が他サイト」とかの場合は、相対パスが使えないのでこっちかなとか・・・
(そういうケースがあるかと聞かれると疑問ですが)

※相対パスが使えるケースでは、相対パスの方が良いですね。
※「JavaScriptが切れてたらリンクが飛べない」よりは
※「JavaScriptが切れててもリンクは飛べる」方が断然良いですし。

javascript

1function goPage(pagename) { 2 location.href = "http://teratail.com/" + pagename; 3}

html

1<div> 2 <a href="javascript:void(0)" onclick="goPage('tour');">てすと1</a> 3</div> 4<div> 5 <a href="javascript:void(0)" onclick="goPage('tags');">てすと2</a> 6</div>

まあでも、上でも書きましたが
「JavaScriptを切っているとリンクが飛べない」というのはあまり良い作りではないので、
よほど数が多くて、頻繁に変わる、というのでもない限りは
js は使わずにベタっと href を書いた方が良いですね。

投稿2016/03/18 03:31

sk_3122

総合スコア1126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

JimmyKing2001

2016/03/18 05:51

こんにちは。補足のコメントどうもありがとうございます。私が初心者でこんなにご丁寧に教えていただけると感動です。今回は特別な作業の対応なので、普通リンクはphpで飛ばしたり、.htaccessでさばいたりします。上記のコードも勉強になります。また引き続きどうぞよろしくお願いします。
guest

0

※jQuery を使っています

javascript

1function test() { 2 $("a").each(function(){ // a 要素を全部まわす 3 4 var $lnk = $(this); // each 内で $(this) = a要素 5 6 alert($lnk.text() + '\n\n' 7 + $lnk.data("pagename") + '\n\n' 8 + $lnk.prop("class")); 9 10 if ($lnk.prop("class") != "test") { 11 alert("対象ではない"); 12 return true; //each 内で return true = continue 13 } 14 15 // href を設定 16 var n = $lnk.data("pagename"); 17 $lnk.prop("href", "http://teratail.com/" + n); 18 }); 19}

html

1<!-- テスト的にボタンで呼んでいますが、実際は画面のロード時に呼ぶ --> 2<button onclick="test()">TEST</button> 3 4<div><a href="#" class="test" data-pagename="tour">ほげ</a></div> 5<div><a href="#">ふが</a></div> 6<div><a href="#" class="test" data-pagename="tags">ぴよ</a></div>

こういうことですかね。jQuery を使わない版が必要であれば明日、か誰かパス・・・
(ごめんなさい今日はもう帰ります)

投稿2016/03/17 10:21

sk_3122

総合スコア1126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

JimmyKing2001

2016/03/17 10:38

たくさん書いていただきどうもありがとうございます。一日お疲れ様です。どうもありがとうございます。
guest

0

getDir() の部分はぱっとは分からないのですが、
とりあえずリンクの飛び先を書き換える部分のサンプルだけ置いておきます。

javascript

1function test(lnk, n) { 2 // a 要素の onclick にて this を渡しているので、引数として来るのは a 要素です 3 alert(lnk.tagName + "\n\n" + lnk.href); // 書換前の確認 4 5 // href を書き換え 6 lnk.href = "http://teratail.com/" + n; 7 8 alert(lnk.tagName + "\n\n" + lnk.href); // 書換後の確認 9}

html

1<div> 2 <a href="#" onclick="test(this, 'tour');">てすと1</a> 3</div> 4<div> 5 <a href="#" onclick="test(this, 'tags');">てすと2</a> 6</div>

こんな感じですかね?

href の頭は仮に "http://teratail.com/" にしてありますが、
ここを window.location をなんやかやして現在位置を取り出す感じになるでしょうか。

投稿2016/03/17 09:41

sk_3122

総合スコア1126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

JimmyKing2001

2016/03/17 09:55

ご回答いただき、どうも有難うございます。リンクの書きかえであれば確かにサンプルの方も動きます。ちょっと要望と違いますが、参考させていただきます。
sk_3122

2016/03/17 10:06

ああごめんなさい、読み直したら、クリックした時に書き換えたいんじゃなくて 画面表示時に確定させるので良いんですね。 <a href="<%= rootpath %>/abc.html"> みたいな?(これは ASP.NET の例ですが) ルートの部分を共通で一括書き換えできるようにしたい、ということですかね。 ええっと、私が書いたの ↑ は onclick で書き換えていますが、 画面表示時に ■ 全 A 要素を取得して LOOP で回す。 ■ 書き換えたくないリンクもあるかもしれないから、対象の A 要素にだけなにか class (CSS) を指定しておいて、それで判別する? みたいな感じが良いでしょうか。 もし jQuery とかが使えるなら、使った方が簡単ですかね。 使えないなら・・・ document.getElementsByTagName() とかですかね。
JimmyKing2001

2016/03/17 10:35

コメントどうもありがとうございます。すみません、私の質問が悪かったかも知れません。おっしゃる通り、phpやjQuery使って簡単にできますが、単純にそのhtml+jsでどのように実現できるか気になっています。<a href="<%= rootpath %>/abc.html"> をhtml+js版に書き換えるとどうなりますかのような感じです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問