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

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

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

jQuery Mobileとはスマートフォンとタブレット用に最適化されたフレームワークです。様々な携帯端末にjQueryで作られたユーザーインターフェイスシステムを提供します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

解決済

1回答

2369閲覧

リストビューでの「同一フォルダ内の別のHTMLファイル」へのリンクができない

series207

総合スコア49

jQuery Mobile

jQuery Mobileとはスマートフォンとタブレット用に最適化されたフレームワークです。様々な携帯端末にjQueryで作られたユーザーインターフェイスシステムを提供します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

0グッド

0クリップ

投稿2020/07/03 21:53

編集2020/07/05 05:27

#困っていること
「program.html」のリストビューの一番上の段をクリックすると、「python.html」にリンクするプログラムを作ったのですが、外部サイトへのリンク(絶対パス)は上手くいったのですが、同一フォルダにある別のHTMLファイルへのリンク(相対パス)が上手くいかず、そこをクリックしても「Error Loading page」になりアクセスできません。どうすればいいですか?

#【7/5追記】フォルダの状態
同じフォルダ内に「program.html」と「python.html」の2つのhtmlファイルが共存しており、「lang」フォルダの中に画像ファイルが入っています。
![イメージ説明]

#【7/5追記】参考にしたwebサイト
http://masaboo.cside.com/new_html1/ht_67.htm
を参照しました。上の画像を見ても分かる通り、今回のケースは、参考サイトの「index.htmからlink.htmにリンクする」の項目と同じ状況です。

http://www.u.tsukuba.ac.jp/~okada.ryotaro.fw/webpage/link.html
でも、「同一フォルダ内では,ファイル名だけでリンクを張る事が出来る」と書いているので、今回も同じやり方でできると思うのですが、なぜできないのでしょう?

#該当のソースコード (program.html(リストビュー))
【追記】下の段のボタンを外部サイトへのリンクとしました。
これで上の段はエラー、下の段はリンクが成功していることが分かります。

program.html (リストビュー)

html

1<!doctype html><html lang="ja"> 2<head> 3<body>My Page</body> 4 5<meta http-equiv="Content-type"content="text/html; charset=UTF-8"> 6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 <link rel="stylesheet" 11 href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 12<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 13<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> 14</script> 15</head> 16 17 18<!--#page_area--> 19<div data-role="page"> 20 21 22<!--#header_area--> 23 <div data-role="header" data-theme="b"> 24 25 <div align="center">プログラミング言語</div> 26 27 </div> 28 29 30<!--#content_area--> 31<div data-role="controlgroup"> 32 33<div class="content-primary main-cintent"> 34<ul data-role="listview"> 35 <li><a href="python.html"> 36 <img src="lang/python.jpg"> 37 <h3>python</h3> 38 <p>統計や機械学習に最適</p> 39 </a></li> 40 41 <li><a href="https://www.java.com/ja/"> 42 <img src="lang/java.jpg"> 43 <h3>java</h3> 44 <p>汎用的なアプリケーションが作成可能</p> 45 </a></li> 46</div></div> 47 48 49<!--#footer_area--> 50<div data-role="footer"> 51<div align="center">プログラミング言語</div> 52</div> 53

#python.html (リンク先)

html

1<!doctype html><html lang="ja"> 2<head> 3<body>My Page</body> 4 5<meta http-equiv="Content-type"content="text/html; charset=Shift_JIS"> 6<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp"> 7<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 <link rel="stylesheet" 11 href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 12<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 13<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> 14</script> 15</head> 16 17 18<!--#page_area--> 19<div data-role="page" > 20 21 <div id="popup" data-role="popup" data-dismissible="false" data-overlay-theme="b"> 22 <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-right">閉じる</a> 23 24 <img src="image/2.jpg" style="max-height:400px;" /> 25</div> 26<!--#header_area--> 27 <div data-role="header" data-theme="b"> 28 29 <title>python</title> 30 31</div> 32 33 34<!--#content_area--> 35<div role="main" class="ui-content"> 36 37python 38 39</div> 40 41<div class="content-primary main-cintent"> 42<div role="main" class="ui-content"> 43 <p><a href="#popup" data-rel="popup" data-transition="pop"> 44 <img src="lang/python.jpg" style="width:25%" /></a></p> 45 </div> 46 47<!--#footer_area--> 48<div data-role="footer"> 49 50<p style="text-align: right">python</p> 51 52</div> 53</div> 54 55 56</html>

#google chromeでの表示 (実行結果)

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

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

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

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

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

m.ts10806

2020/07/04 04:16

このリンクのさせ方だと、どう見ても同じフォルダ内にある同じサイトのようですが。
series207

2020/07/04 04:20

同じフォルダにはありますが、「program.html」から「python.html」へリンクしています。 通常ならリンクできるはずなのですが、なぜかできません。
m.ts10806

2020/07/04 04:26

あと >相対パスができない というタイトルで >同じフォルダにある別のサイトへのリンク(絶対パス)が上手くいかず という内容では合致していません。 「同じフォルダにある別のサイト」って何でしょうか? コードを見る限り「外部サイト」「別のサイト」はjQuery関連のCDNしか存在しません。 用語は正しく使ってください。
m.ts10806

2020/07/04 04:26

質問は編集できますので、適宜調整いただければと。
series207

2020/07/04 04:28

すいません。単に間違えただけです。修正しておきます。
series207

2020/07/05 00:34

あと、「同じフォルダにある別のサイト」という表現が分かりにくかったかと思います。 「同じフォルダにあるHTMLファイル」とすべきでしたね。失礼致しました。 また、フォルダの状態の画像と説明を追記しておきました。
guest

回答1

0

ベストアンサー

jQuery Mobileを使っているんでしょうか。
ローカル環境では通信がうまくできないので、Error Loading Pageになります。
適当なサーバを立ち上げるなどしてテストしてください。

https://developer.mozilla.org/ja/docs/Learn/Common_questions/set_up_a_local_testing_server

投稿2020/07/06 13:24

編集2020/07/06 13:28
magf

総合スコア212

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

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

series207

2020/07/06 21:32

ご回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問