ベストアンサー

クリックでテーブル内の表示だけ変えたい

2008/08/02 00:50

文章では説明が伝わりにくいことなんですが、一つのテーブル内で複数のメニューからクリック一つで表示が自由に変えられるタグを作成したいと考えています。ところがいざ作ろうにもそれを教えてくれるサイトが見つからず困っています。おそらくJavaScriptを用いて作るんだとは思うんですが… 例えば下記のURLの右にあるアバウト・お知らせ・他ブログのようにクリック一つでテーブル内の表示が即座に変わるようなタグが作りたいのです。参考：http://whithdrawxwhithdraw.blog49.fc2.com/ これに関して知識のある方がいましたらお手数ですが、タグの記述を教えていただけるとありがたいです。よろしくお願いします！

-matatabi-
お礼率66% (14/21)

JavaScript
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

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

ベストアンサー

noname#84373

2008/08/02 12:59 回答No.2

<html> <head> <style> .box { width:400px; } .box0 { border:0px none; text-align:right; } .box1 { border:1px #f8d solid; text-align:center; width:100px;margin-left:10px; } .box2 { border:1px #f8d solid; text-align:left; padding:10px;} .box2 h4 { border-bottom:1px #f8d solid; color:#286; line-height:100%;} .hid { display:none; } </style> <script> function dispText(n){ for(i=1;i<4;i++) document.getElementById('t'+i).style.display=(n==i)?'block':'none'; } </script> </head> <body> <div class="box"> <div class="box0"> <a href="#" onClick="dispText(1)" class="box1">menu1</a> <a href="#" onClick="dispText(2)" class="box1">menu2</a> <a href="#" onClick="dispText(3)" class="box1">menu3</a> </div> <div class="box2"> <div id="t1"> <h4>menu1</h4> abc </div> <div id="t2" class="hid"> <h4>menu2</h4> def </div> <div id="t3" class="hid"> <h4>menu3</h4> ghi </div> </div> </div> </body></html>

質問者

お礼 2008/08/02 15:05

回答してくださいましてありがとうございます。まさにこのタグです。本当に助かりました。 steel_grayさんとpipi_さんにはこの場を借りて深く感謝します！

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

steel_gray
ベストアンサー率66% (1052/1578)

2008/08/02 10:31 回答No.1

>おそらくJavaScriptを用いて作るんだとは思うそうです、Javascriptです。 >タグの記述を教えていただけると http://www.google.com/search?q=javascript+%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB+%E8%A1%A8%E7%A4%BA%E3%80%80%E5%A4%89%E6%9B%B4&btnG=%E6%A4%9C%E7%B4%A2 ↑上記のようにいくつかの言葉を並べて検索するとサンプルが得られるかもしれません。質問内容が曖昧なので曖昧な言葉でしか検索してませんが、より具体的な言葉で検索するともっと絞れるかと思います。

質問者

補足 2008/08/02 12:31

回答ありがとうございます。あらゆるキーワードで検索してみましたが、残念ながら的を射る解説サイトにはたどり着けませんでした。質問内容が曖昧だというご指摘がありましたのでもう少し詳しく説明しますと、一つのテキストエリア内から複数のボタンを選択することで、中身の文字だけが切り替わる設定を作成したいのです。【ボタンＡ】【ボタンＢ】【ボタンＣ】 ┌――――――――――――― ｜[内容] ｜～～～～～ └――――――――――――― 例えばボタンＡを押したらその該当する内容が表示され、ボタンＢを押したら中身だけ違う内容のものがそのままスムーズに切り替わるといった感じです。このようなJavascriptのタグソースを教えていただきたく質問をさせていただいた次第です。

ログインすると、全ての回答が全文表示されます。