■相対パス内のフォルダー名をボタンで切り替えたい。 HTML5&CSS3で作ったお店のホームページがあります。

■相対パス内のフォルダー名をボタンで切り替えたい。 HTML5&CSS3で作ったお店のホームページがあります。 これに今度英語ページを追加しようと考えているところです。 日本語ページの中に「English」フォルダを作り、その中に日本語ページと同じツリー構造のファイルを全てコピーしました。 各ページの上部には、「日本語ページ」と「英語ページ」を切り替える小さなボタンを配置してあります。 ここからがご教示いただきたい内容です。 例えば、ページ上部に配置した英語への切り替えボタンを押したときに、同じ内容の英語ページを表示したいのです。 <例> 日本語ページ:https://www.test.jp/information/index.html (HTML上の相対パス:<a href="information/index.html">) ↓ 英語ページ:https://www.test.jp/english/information/index.html (HTML上の相対パス:<a href="english/information/index.html">) 切り替えボタンを押した時に、この「english」フォルダの部分を日本語ページ、英語ページに変更できるような設定をしたいのです。 ページを増やしたときに固定で入れなくて良いようにするためです。 たぶんこの操作は、Javascriptで制御するのではないかと思いここで質問させていただきました。 ★JavascriptとHtml内の記述方法について、どなたかわかる方がおりましたらご教示いただければ幸甚です。 よろしくお願い致します。

JavaScript | ホームページ作成25閲覧xmlns="http://www.w3.org/2000/svg">250

ベストアンサー

1

変更せずに完全コピペして動作を確認して下さい、ブラウザのアドレスバーのURLも確認して下さい。 実際に使う場合は外部ファイル(JSファイル)にした方が良いでしょう。 <!doctype html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> <title>test</title> </head> <body> <button type="button" name="nmLanguage" value="" onclick ="Language(this)">日本語</button> <button type="button" name="nmLanguage" value="english" onclick ="Language(this)">English</button> <br> <script type='text/javascript'> Language(null); function Language(sMode){ let sLocatEnglish = "english/information/"; let sLocatJapan = "../../"; let sPathname = location.pathname; let last = sPathname.lastIndexOf("/"); let sSelf = sPathname.substring(last+1); console.log("sSelf="+sSelf); let en = sPathname.lastIndexOf("english"); let a1oLanguage = document.getElementsByName('nmLanguage'); let dm1oLanguage = []; for(let i = 0; i<a1oLanguage.length; i++){ dm1oLanguage[a1oLanguage[i].value] = a1oLanguage[i]; console.log("key="+a1oLanguage[i].value); console.log("value="+dm1oLanguage[a1oLanguage[i].value]); } if(sMode){ let sLocation; console.log("sMode.value="+sMode.value); if(sMode.value!="english"){ sLocation = sLocatJapan+sSelf; }else{ sLocation = sLocatEnglish+sSelf; } console.log("sLocation="+sLocation); location = sLocation; } if(en<0){ dm1oLanguage[""].disabled = true; dm1oLanguage["english"].disabled = false; }else{ dm1oLanguage[""].disabled = false; dm1oLanguage["english"].disabled = true; } } </script> </body> </html>

1人がナイス!しています

連絡が遅くなり申し訳ございません。 今、無事に動作確認を終えました。 本当に有難うございました。 それと教えていただいたボタンの動作を画像への変更は可能ですか。 <button type="button" name="nmLanguage" value="english" onclick ="Language(this)">English</button>  ↓ 単純にbuttonの内容を画像に追加してみるとうまく動きません。記述が悪いのでしょうか。すみませんが併せて教えて頂けると助かります。 <img src="images/translate_english.jpg" type="button" name="nmLanguage" value="english" onclick ="Language(this)" width="180" height="20" alt="英語"/>

画像

ThanksImg質問者からのお礼コメント

この度は本当にいろいろとありがとうございました。 知識レベルといい、適切な分かりやすい説明といい、何から何まで本当にすばらしい方だと思いました。 また何かのことで質問する機会もあるかと存じますが、お目に留まりましたら、その時も是非よろしくお願いいたします。 この度は本当に何から何までありがとうございました。 お世話になりました。

お礼日時:9/20 22:10

その他の回答(1件)

1

> ★JavascriptとHtml内の記述方法について、どなたかわかる方がおりましたらご教示いただければ幸甚です。 HTMLのアンカータグという物を利用します。

1人がナイス!しています

ご回答ありがとうございました。 質問の内容が分かりにくくてすみません。 補足いたしますと、ボタン内の記述はすべて同じ(変数)にして、現在表示しているURLを自動取得してその組み合わせのURLに飛ばしたいのです。 <例>ボタンの中の記述 「<a href=”language-set”/”link-url-set”>」など???と記載。 日本語ボタンを押した場合は、language-set = "japanese"、 英語ボタンを押した場合は、language-set = "english"、 link-url-set = "★現在表示しているURL&ファイル名" みたいな形で、できるといいなと思っているんです。 なんかできそうな気がするのですが、この辺は私には全くわかりません。こうするとページが追加になっても変更が容易かと。 もしお分かりになるようでしたらご教示いただけると助かります。