これってJavaScriptですか？？

質問

以下のソースはJavaScriptになりますか？
HPを（初心者ながら）作っているのですが
JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。
以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか？

<table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML">
タブ１
</div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000">
<div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML">
タブ２
</div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000">
<div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML">
タブ３
</div></td><td style="width:100%;border-bottom:1px solid #000">&nbsp;</td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4">
ここにタブ１の文章
</div></td></tr></tbody></table>
<div style="display:none" id="NAME11">
ここにもタブ１の文章
</div><div style="display:none" id="NAME22">
ここにタブ２の文章
</div><div style="display:none" id="NAME33">
ここにタブ３の文章
</div>

回答No.5

noname#35109 · ベストアンサー

＃１です。

> そこで再度質問したいのですが例えば「教えてgoo!」の
> 「マイページ」、「質問/回答履歴」のページの
> “質問履歴”“回答履歴”とタブのあるものが使われています。
> これはJavaScriptは使われているのでしょうか？

つまり，「教えて！goo」の，
「最新の質問」をクリックしたときと同じような画面でしょう↓。

http://oshiete1.goo.ne.jp/search.php3

これのタブ表示の部分には JavaScript は使われていないようですよ。

大ざっぱに言うと，
次の (1) ～(4) のような別々のページを作成して，
上の タブ の部分に他のページへ行くリンクを付ければ良いだけです。

　(1)
　■■■■　□□□□　□□□□　□□□□
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　　～略～～略～ ～略～ ～略～ ～略～

　(2)
　□□□□　■■■■　□□□□　□□□□
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　　～略～～略～ ～略～ ～略～ ～略～

　(3)
　□□□□　□□□□　■■■■　□□□□
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　　～略～～略～ ～略～ ～略～ ～略～

　(4)
　□□□□　□□□□　□□□□　■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　　～略～～略～ ～略～ ～略～ ～略～

例えば最初の(1)のページのタブ部分の文字に，
(2)～(4)へのリンクを付ければ良いだけです。

　(1)　　　　　　(2)へリンク　(3)へリンク　(4)へリンク
　■■■■　□□□□　□□□□　□□□□
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　■■■■■■■■■■■■■■■■■■
　　～略～～略～ ～略～ ～略～ ～略～

つまり，
見た目がタブがめくれたところに別のものが表示されるように見えるだけです。
実際は別ページで作れば JavaScript はいらないということです。

お礼

本当に丁寧に回答くださってすごく感謝しています。
そのしかけはわかったのですが、実際、タブの部分とページの部分をどうやってつくればいいのかわからないのです。
sassakunさんならどのようにして作りますか？
もしよければご回答いただきたいです。

回答No.6

MAN_MA_RUI

とりあえずこれが参考になるかな？
http://www.1uphp.com/con2/menu/tabmenu1.html

実践の上で分からないことがあったらHTMLのカテで新規質問をしたほうがいいです。
ここを締め切らないで続けるよりも的確な解答をもらえる可能性が高くなる…はず。

回答No.4

MAN_MA_RUI

JavaScriptは環境によって動作しない場合があります。ブラウザの種類、バージョンだとか設定の問題。
IE用のJavaScriptならば非IEでは動きませんし、最近のブラウザがサポートを始めたスクリプトは古いブラウザで動作しません。
また、JavaScriptをOFFにしていれば絶対に動作しないと言うのはまぁ、言うまでもないこと。
JavaScriptを使うのは結構なことですが、なるべくJavaScriptが使えない環境のことも配慮すべきですね。

> これはJavaScriptは使われているのでしょうか？
> 使われていないのであればどのように作ってあるのでしょうか？
gooからログインしてないので分からないけど、たぶんCSSによるレイアウトとかそういうやつではないでしょうか。
タブ方式のメニュー自体はJavaScriptがなくても作れます。

> 保証はできませんが多分MACでも動くのではないかと思います。
あげあし取りだけどMACって書くと頭字語扱いになるんで、Macintoshの略としては不適です。
MACに関してはほんとに頭字語があるのでね。Mac（頭だけ大文字）が適正。

お礼

回答ありがとうございます。
＞タブ方式のメニュー自体はJavaScriptがなくても作れます。
よろしければどのように作っていけばいいのか教えていただけないでしょうか？
この質問を過去、何回もしているのですがしっかりした答えが返ってこず
本当に困っています。作業が前に進まなくって・・・。
HTMLにはあまり詳しくないので、わかりやすく説明くださると嬉しいです。

回答No.3

arenani_sorenani

＞このタブメニュー、ほとんどのパソコンでは見れると思いますか？
回答にも書きましたがWIN環境では、代表的なブラウザでは動きそうです。
つかってあるスクリプトはシンプルで基本的なものですので、
保証はできませんが多分MACでも動くのではないかと思います。

javascriptなどを使わずにタブの切替を行うには
タブごとに別ページを作成して<A>タグで飛ばせばできます。

ただメニューが頻繁に変わる場合やページ数が多い場合は
全ページで同じような記述や変更を行う必要がありますので
面倒ですし、後のメンテナンスの労力は膨大になります。

最近では多くのホームページでjavascriptが使われており
OFFにしていると見れないページが多数だと思います。
今更、javascriptを毛嫌いする必要もないかと・・

ただ、このソースはちょっと？が付きますね。

お礼

回答ありがとうございます。
？というのはやはり文を２回書かないといけないところでしょうか？

回答No.2

arenani_sorenani

javascriptというよりは
HTMLのタグにCSSとjavascriptを全部突っ込んだシロモノですね。
素人の方がこのまま使うなら問題はないかと思います。

ただ見栄えでいうと、
Firefoxのときにcursor:hand;が効いていないのでカーソルが手の形になりません。
cursor:pointer;では効きましたので直した方がいいかも。

スクリプト自体はWinのIE7.0・Opera・Netscape・Firefoxで動作しました。
スクリプトを無効にしていない限りは多分ＯＫかと思います。

ただ、これをページ全体のデザインにするなら
後のメンテナンスやカスタマイズのことを考えると
ＣＳＳとjavascriptを全部タグから切り離して
head内に書き直した方がよろしいかと思います。

だいたいタブ１の文章を同じもの２回書くんですか？これ。

お礼

回答ありがとうございます。
最後の文、私も面倒だと思います。
このタブメニュー、ほとんどのパソコンでは見れると思いますか？

回答No.1

noname#35109

JavaScript としては，

「getElementByIdメソッド」
http://www.openspc2.org/JavaScript/ref/DOM/getElementById/index.html

このあたりがまぜこんでありますね。

書かれていらっしゃるソースコードは，
おそらここら辺↓からの引用だとおもいます。

シンプレスト - HTMLテンプレート（タグ素材） - 動きのあるテーブル
http://www.sys5jp.net/simplest/tablej.php?act=2

「百聞は一見に如かず」です。
Windows でしたら，
Opera http://jp.opera.com/download/　や
Firefox http://www.mozilla-japan.org/products/firefox/
などをダウンロード＆インストールしてみて，
何がどう違うのかをご自分の目で確かめてみられるのが一番だと思います。

また IE でも，
このような感じで↓JavaScript の有効無効が切り替えられます。

「インターネットエクスプローラーで JAVAScriptを有効にする方法」
https://kokei.shokokai.or.jp/contents/iesettei.asp

「スクリプト」－「アクティブスクリプト」－「有効にする」や「無効にする」で，
JavaScript の ON，OFF を切り替えられますから，
JavaScript を無効にしてみられるとわかると思います。

シンプレスト - HTMLテンプレート（タグ素材） - 動きのあるテーブル
http://www.sys5jp.net/simplest/tablej.php?act=2

を表示して，JavaScript を無効にして，
「F5」キーを押すなどして，ページのリロードすれば，無効になって表示されます。

JavaScript を無効にして上のページを表示すると，
タブ1 とか タブ2 とかは見ることができますが，
タブの切り替えができなくなりますね。

お礼

詳しい回答ありがとうございます。
本当ですね。JavaScriptをオフにしてみるとシンプレストのタブメニューは切り替えられませんでした。
私はそのシンプレストにあるような「タブの付いたメニュー」を作りたいのですが
このJavaScriptを使いたくありません。
そこで再度質問したいのですが例えば「教えてgoo!」の「マイページ」、「質問/回答履歴」のページの
“質問履歴”“回答履歴”とタブのあるものが使われています。
これはJavaScriptは使われているのでしょうか？
使われていないのであればどのように作ってあるのでしょうか？
ご回答いただければ嬉しいです。
よろしくお願いいたします。