ここから本文です

JavaScriptを使用したページ一部の書き換えについての質問。 現在初めてのホーム...

kkr********さん

2011/3/1109:04:46

JavaScriptを使用したページ一部の書き換えについての質問。
現在初めてのホームページ作成を試みています。
divタグを使用し、ページ構成をしています。
Html・CSSの基本的知識はありますが、JavaScriptは浅いです。

ヘッダーとフッターをJavaScriptでインクルードしてindexに展開し、indexの中にメインとなるコンテンツを記述しています。
メインコンテンツは、div①基盤 div②左側に縦長のボックス(プロフィールなど) div③中央の大きなボックス div④右側にサブメニュー

大きく分けて、この4つのdivで構成しています。
ヘッダーのメインメニューボタン(img)をクリックすると、div③の部分だけを他のHtmlファイルへ表示を切り替えたいと思っています。
おそらく、Ajaxを使用するのだと思いますが、prototypeのgetElementでid要素を取得して、その後の記述が良く分からないので質問させて頂きました。

簡単に言うと、フレームやインフレームを使わずに、JavaScriptを使用したフレームもどきのようなものを作りたいと思っています。
これは、主にSEOの面。そして何より、推奨されていない事からです。

また、現在日記帳CGIをHtmlのオブジェクトタグで表示しています。
あまりにもカッコ悪いし、使い勝手も良くないので、これもJavaScriptによって出力結果を展開したいと思っています。

上記2つの事に関して、調べても分からなかった為質問させて頂きました。
アドバイスを宜しくお願い致します。


★SSIの使用はできません。

閲覧数:
452
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

jad********さん

2011/3/1113:18:52

ちょっとデザインとか適当なんですが・・・
prototype.jsを利用した下記サイトを参考に作ってみました。
http://www.s2factory.co.jp/tech/prototype/prototype.js.html
ソースをコピペして新しくHTMLファイルを作ってやってみてください。
時間がかかりますがとってきます。
同一サイト内なら速さ的にも問題ないと思います。
---------------------ソースここから-----------
<html>
<head>
<style>
#head {
height: 100px;
border: black solid 1px;
width: 800px;
}
#head li {
float: left;
}
#head li a {
background-color: silver;
padding: 2px;
margin: 2px;
}
#left {
float: left;
height: 500px;
width: 100px;
border: black solid 1px;
}
#center {
float: left;
height: 500px;
width: 600px;
border: black solid 1px;
}
#right {
float: left;
height: 500px;
width: 100px;
border: black solid 1px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.j..."></script>
<script>
function pageChg(num) {
var url = "";
switch(num) {
case 1:
url = "http://www.yahoo.co.jp";
break;
case 2:
url = "http://www.google.co.jp";
break;
case 3:
url = "http://www.goo.ne.jp";
break;
case 4:
url = "http://www.rakuten.co.jp";
break;
}
if (url != "") {
getHTML(url);
}
}
function getHTML(url)
{
var pars = 'someParameter=ABC';

var myAjax = new Ajax.Updater(
'center',
url,
{
method: 'get',
parameters: pars
});

}

</script>
</head>
<body>
<div id="head">
<ul>
<li><a href="javascript:void(0);" onclick="pageChg(1);">ヤフー</a></li>
<li><a href="javascript:void(0);" onclick="pageChg(2);">Google</a></li>
<li><a href="javascript:void(0);" onclick="pageChg(3);">goo</a></li>
<li><a href="javascript:void(0);" onclick="pageChg(4);">楽天</a></li>
</ul>
</div>
<div id="left">左側</div>
<div id="center">真ん中でっかいところ</div>
<div id="right">右側</div>
</body>
</html>
----------------------------------
ソースも適当すぎてすみません。

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜1件/1件中

kuw********さん

2011/3/1123:31:54

SEOを意識してるのにJavaScriptとか・・・本気ですか?

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる