こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

jQueryの働きがブラウザにより異なる。

html, javascript(jQuery)の初歩を使ってウェブサイトのひな型を作成致しました。

目的は、index.htmlファイルにホームページ(HP)を記述し、必要に応じてサブのhtmlファイル(a.html, b.htmlなど)を読み出し、HPの所望の場所にその内容を表示するサイトを作ることです。
具体的には、ホームページをT字型に分割し、Tの上部にタイトルを表示、左側(左コラム)に項目を表示して、項目のどれかをクリックすると別のhtmlファイル(a.htmlやb.htmlなど)に記載された記事の内容を右側(右コラム)に表示させたいわけです。このHPのイメージ画像を添付させて頂きました。

下のプログラムをローカルで動かしてみましたところ、Firefox(v7.0.1)とSafari(v5.1.7)では所望の動作を致しました。一方、InternetExplorer(IE) (v11.0.x)とGoogleChrome(33.0.x)では、項目の表示までは所望の動作を致しましたが、項目をクリックしても、別htmlファイルの内容を右コラムに表示できませんでした。

このウェブを少なくとも上の4つのブラウザで動作させたいのですが、いわゆるクロスブラウザの問題なのか、あるいはもっと初歩的な誤りを犯しているのか、初心者ですので全くと云っていいほど見当がつきません。
まことにお手数ですが、誤りをご指摘頂き、正しい方法をご教示頂きたくお願い申し上げます。また併せて、この辺りのことについて分かり易い説明があるサイト、あるいは書籍をご紹介頂ければ幸いです。

以下はindex.htmlと関連プログラムの概要です。
1)index.htmlファイル
・ホームページ。
・DOCTYPE宣言はhtml4.0Transitionalの互換モード。
・<scripttype="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js">
 はjQueryライブラリーのアクセス宣言。
・$(document).ready(function(){ から }) がjavascript (jQuery)
2)pagesフォルダ
・today.html, tomorrow.html, space.htmlのファイルを格納。
・それぞれ項目の表題と記事を記述するファイル。
3)ファイルのディレクトリ
・上の2つのファイルとフォルダはローカルのディスクの一つのフォルダに格納。
・ディレクトリはそれぞれ
 /index.html, /index.html/pages,

以下はそれぞれのコードです。cssは別ファイルにせず直接htmlに書き込みました。
1)index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML5,Web Audio API" />
<meta name="description" content="勉強会です。" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>試験</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//初期状態でのロードファイルを指定
$('#contentsBox').load('pages/today.html');
//クリックで各コンテンツを切り替え
$('.switchButton').click(function(){
var loadContents = $(this).attr('title');
$('#contentsBox').load('pages/'+loadContents+'.html');
});
});
</script>
</head>

<body style="font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;">
<style type="text/css">
* { margin:0; padding:0;}
ul {margin-left:35px; margin-top: 10px;}
ul li {font-size:4mm; color:maroon; margin-top:1px; margin-bottom:1px;}
ul a {color:maroon; }
div.left-column{float:left; align:left; border-right:medium solid #800000; width:24.7%; height:100%; background-color:#f8dce0;}ul {margin-left:35px; margin-top: 10px;}
</style>
<div style="width:100%; background-color:#800000;">
<h1 align="center" style="padding-top:15px; padding-bottom:15px; color:white;">
ここにサイト名<br>
</h1>
</div>
<div class="left-column">
<ul>
<li class="switchButton" title="today">今日のできごと</li>
<li class="switchButton" title="tomorrow">明日のお天気</li>
<li class="switchButton" title="space">宇宙のはじまり</li>
</ul>
</div>
<div id="contentsBox" style="float:right; border-left: medium solid #800000; width:74.5%; height:100%; background-color:#f8dce0;">
</div>
</body>
</html>

上のjQuery の部分はhttp://blog.nico0927.net/20111103/jquery/316 さんの
「jQueryでdiv要素の中身にHTMLファイルを読み込みボタンで切り替え」から拝借しています。
2)pagesフォルダの例えばtomorrow.htmlの中身は
<h3 style="margin-left:10px;">明日のお天気</h3>
<p style="margin:0px 10px;">平成26年3月7日10時50分 気象庁予報部発表... 明日…となる所があるでしょう。</p>
です。
today.html, space.htmlも同様です。

以上です。

まことにお手数ですがよろしくご教授頂きますようお願い申し上げます。

大変申し訳ございませんが、この投稿に添付された画像や動画などは、「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWAVEよりご覧ください。

マルチメディア機能とは?

投稿日時 - 2014-04-14 00:19:04

QNo.8553661

困ってます

質問者が選んだベストアンサー

httpd というのはWebサーバソフトの総称です。
ご自身のパソコンの中でWebサーバソフトを動かすことで、いちいちサーバにアップロードせずに動作確認が出来るようになります。

Windows環境であれば、マイクロソフト純正のIISというソフトを利用する方法があります。
「Windowsの機能の有効化または無効化」からインストールする事が可能です。

他には、Webサーバソフトとして有名なApacheをインストールして利用する方法も有ります。
Apacheだけをインストールしようとすると若干面倒ですが、XAMPPというパッケージがありApacheの他、データベースサーバやPHP、Perlといったプログラミング言語をまとめてインストールしてくれ、ご自身のパソコン内でのテスト環境として使用する場合は面倒な設定も必要無くて楽チンです。
XAMPPは利用されている方も多いので検索すると沢山情報が出てきます。

投稿日時 - 2014-04-18 22:43:51

お礼

t_ohta さま

早速ご回答を頂きましてありがとうございました。

話の巾が一挙に大きくなってしまいましたが、それでもサーバ側の知識を多少とも備えることで、ウェブをつくる際の見通しは随分と良くなるのではないかと期待しております。
ご教示頂きましたXAMPPにつきまして勉強させて頂きます。
勉強を進めればまた難しいお話に出くわすでしょうが、その時には改めてご教示を仰ぎたいと考えております。

大所高所の目線で適切なご教示を頂きありがとうございました。
重ねて御礼を申しあげます。

Jim Tenchi

投稿日時 - 2014-04-22 21:35:36

ANo.2

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

サーバにアップするか、ローカルでhttpdを動かしてテストすると正常に動作すると思います。
セキュリティー等の問題で、ローカルファイルへのAjax通信が制限されているブラウザではjQueryのloadでローカルファイルを読み込めない場合があります。

投稿日時 - 2014-04-14 07:39:37

補足

この質問にご回答をお寄せ頂きありがとうございました。
厚く御礼申し上げます。

これと同じ内容の質問(4つの内2つのブラウザ(IEとGC)で動作しない)にもご回答を頂きましたが、当方の手違いで締切となり、御礼を申しあげる機会を失してしましました。失礼いたしましたこと、お許し頂きますようお願い致します。

さて、ご教示の一つはアップロードすれば動作するだろうと云うものでありました。何度か試みておりますが、現在の所うまく働いてくれません。これにつきましてはさらに試みてまたご報告させて頂きたいと考えております。

もう一つは、httpdを動かしてテストすると正常に動作するだろうとのご教示でした。
知識がなく、たいへんお恥ずかしいのですが、httpdを動かすということの具体的な意味が理解できません。従いまして、どのような対処をすればよいのか皆目見当がつかない有様です。

誠に申し訳ございませんが、httpd を動かす手順について、ここで投稿させて頂いておりますプログラムにそって、今少し具体的に、順を追ってご教示を頂くわけには参りませんでしょうか?お手数をお掛けすることになるのでしょうが、どうぞよろしくお願い致します。
あるいはこの方法と意義について、基礎的な勉強ができる分かり易い解説サイトあるいは書籍などをご紹介頂けませんでしょうか?

まことに恐縮ですが、どうぞよろしくご教授を頂きますようお願い致します。
お忙しいところ迅速なご教示を頂きましたのに御礼が遅れましたこと重ねてお詫び申し上げます。

投稿日時 - 2014-04-18 20:04:20

あなたにオススメの質問