ボタンを使ってページ内の表示を変える

0   名前： Fif ： 2006/07/02（日） 14:23  ID:Mj59fqR8
初めまして〜♪

プルダウンメニューを使いページ内を変更するってのはあったのですが、
それをボタンをクリックするコトで表示内容を変更したいんです。
どなたがご教授お願いします（＿　＿）

################下記は<head>内に#######
<script type="text/javascript" language="JavaScript">
<!--
function showthis(obj) {
if(!obj) return false;
if(document.getElementById) {
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById(obj).style.display = "block";
} else {
return false;
}
}
// -->
</script>
<style type="text/css">
<!--
#item1,#item2,#item3 {
display: none;
}
-->
</style>
#######################################

################下記は<body>内に#######
<form>
<select onchange="showthis(this.value)">
<option selected="selected">選んでください</option>
<option value="item1">項目１</option>
<option value="item2">項目２</option>
<option value="item3">項目３</option>
</select>
</form>

<div id="item1">
<p>
項目１の表示内容です
</p>
</div>

<div id="item2">
<p>
項目２の表示内容です
</p>
</div>

<div id="item3">
<p>
項目３の表示内容です
</p>
</div>
#######################################
1   名前： sasame ： 2006/07/02（日） 14:23  ID:x9chvsnj
ボタンに変更したいと思った時に何かしましたか？どんなことを調べましたか？
<button>って言う直球ど真ん中のようなタグがありますのでもう少しがんばってみてください。
30分くらい、このサイトをよく読めば答えは書いてあります。

がんばってみた結果、どこがどうわからないのか書き込んだら、丁寧に解説してくれる人も現れるかもしれません。

http://www.tagindex.com/html_tag/form/button.html
2   名前： Fif ： 2006/07/02（日） 14:23  ID:Mj59fqR8
質問したいのはボタン以外にも必要な記述はあるか？です。
プルダウンメニューの際はセレクトなどの記述があります。
ボタンの場合は同じく何か必要なんですか？
3   名前： sasame ： 2006/07/02（日） 14:23  ID:N8cW.nNY
せめて、buttonタグを使って書き換えたソースを提示いただけたら
どこがどう違うから動かないんですよ、ってご指摘できたかもしれなかったのですが。

うんちくなんかいらない、コードだけ欲しいってことなんでしょうかね…
#私はうんちくの方が大好きなのですけど。
<form>
<button type="button" value="item1" onClick="showthis(this.value)">項目１</button>
<button type="button" value="item2" onClick="showthis(this.value)">項目２</button>
<button type="button" value="item3" onClick="showthis(this.value)">項目３</button>
</form>
#<button>タグの変わりに<input>タグを使用することもできます。

<form>タグで囲まなくても動作するようですが(Fxで確認)、たぶん「不完全なタグでも何とか補完して表示する」仕様に
基づくものだと思うのであったほうがいいと思います。
「onchange」は「onclick」に変更してください。(プルダウンは「選ぶだとき」、ボタンは「押したとき」です。)

ついでに、
プルダウンメニューを作るときに<select>タグで囲うのではなくて、
<select>タグで囲われた<option>をプルダウンで表示している です。

#間違いがありましたら申し訳ありません。是非訂正してください。
4   名前： Fif ： 2006/07/02（日） 14:23  ID:Mj59fqR8
間違いなんてとんでもない＾＾；
ちゃんと動きました♪
ありがとうございます

>>うんちく
自分はうんちくよりも答えをズバっと教えてもらった方が良い派ですね
基本から応用に持っていくタイプなので
一覧へ戻る