- ベストアンサー
クリックでテーブル内の表示だけ変えたい
文章では説明が伝わりにくいことなんですが、一つのテーブル内で複数のメニューからクリック一つで表示が自由に変えられるタグを作成したいと考えています。 ところがいざ作ろうにもそれを教えてくれるサイトが見つからず困っています。おそらくJavaScriptを用いて作るんだとは思うんですが… 例えば下記のURLの右にあるアバウト・お知らせ・他ブログのようにクリック一つでテーブル内の表示が即座に変わるようなタグが作りたいのです。 参考：http://whithdrawxwhithdraw.blog49.fc2.com/ これに関して知識のある方がいましたらお手数ですが、タグの記述を教えていただけるとありがたいです。よろしくお願いします！
- -matatabi-
- お礼率66% (14/21)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （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>
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
>おそらく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 ↑上記のようにいくつかの言葉を並べて検索するとサンプルが得られるかもしれません。 質問内容が曖昧なので曖昧な言葉でしか検索してませんが、 より具体的な言葉で検索するともっと絞れるかと思います。
補足
回答ありがとうございます。 あらゆるキーワードで検索してみましたが、残念ながら的を射る解説サイトにはたどり着けませんでした。 質問内容が曖昧だというご指摘がありましたのでもう少し詳しく説明しますと、一つのテキストエリア内から複数のボタンを選択することで、中身の文字だけが切り替わる設定を作成したいのです。 【ボタンＡ】【ボタンＢ】【ボタンＣ】 ┌――――――――――――― ｜[内容] ｜～～～～～ └――――――――――――― 例えばボタンＡを押したらその該当する内容が表示され、ボタンＢを押したら中身だけ違う内容のものがそのままスムーズに切り替わるといった感じです。 このようなJavascriptのタグソースを教えていただきたく質問をさせていただいた次第です。
関連するQ&A
- FC2ブログのタグをプルダウン化
記事中の語をリンクさせるタグをプルダウン化させたいのですが プラグイン周りに知識が乏しいので質問させて頂きました。 FC2ブログでタグをプルダウン化するには どういった記述をすれば出来ますか？ 何か足りない部分がありましたら すぐに補足しますので宜しく御願いします。 ■FC2ブログ-タグについてhttp://fc2blogmanual.blog60.fc2.com/blog-entry-28.html
- 締切済み
- ブログ
- サムネイルをクリックし、メインに表示→クリックでリンク先へ。
サムネイルをクリックし、メインに表示→クリックでリンク先へ。 というJavaScriptを採用したいのですが、下記サイトを参考にして、サムネイルをクリックし、メインに表示までは出来たのですが、メインに表示された画像をクリックして別ページへリンクというのがどうしてもできません。 どのような記述にすれば可能でしょうか？ よろしくおねがいします。 http://chibatch.jp/blog/archives/change-image2.html
- ベストアンサー
- JavaScript
- テーブルを左右に並べて表示させたいのですが
テーブルを左右に分割して、左側にメニュー、右側に静的な文字を表示させています。 <table> <tr><td>メニュー</td> <td>静的な文字</td><tr></table> 左側のメニューをクリックすると子メニューが現れて行数が増えるメニューにしました。 --書籍のJavaScriptを応用したらうまく作れました。 ただ、右側の静的な文字が、（左側親メニューをクリックし子メニューが現れ、左側の行数が増えることによって）下がってしまいます。 <td></td>の間にもうひとつテーブルをいれても、同じです。 CSSか何かで定義できそうな気もしますが、よくわかりません。（CSS使ったことがありません。） ご存知の方おられましたら、よろしくお願いします。
- ベストアンサー
- HTML
- javascriptを使って文字を表示させたい
javascriptを使ってdivタグをクリックしたらdivタグの中に文字を表示させたいのですが、どのように記述すればよいのでしょうか？
- 締切済み
- JavaScript
- ハイパーリンクに下線を表示するには？
現在、こちら↓のテンプレートを使っているのですが http://sozai.blog18.fc2.com/blog-entry-69.html ハイパーリンクに下線が表示されません。 記事内のみ、もしくは一箇所のみ下線を表示する記述はあれば教えていだだきたいです。
- ベストアンサー
- HTML
- アメブロで自作ブログパーツが表示されない
質問させて頂きます。 アメーバブログに自作のブログパーツのタグを貼り付けたのですが、表示されなくて困っています。 ブログパーツの内容は、Flashで画像にリンクを付け、クリックされたら指定したサイトを表示するというものです。 fc2のwebスペースにアカウントを取って、 ・ブログパーツにするFlash、 ・表示用のJavaScript、 ・サンプル＆貼り付けタグ表示用のhtml をアップロードし、貼り付けタグをアメブロのフリープラグインへ追加しましたが、Flashが表示されず、Fashのサイズ分の空白ができてしまいます。 知り合いで独自ドメインを使っている人に頼んで、そのドメインにアップロードしてもらったら正常に表示、動作ができましたが、fc2⇔アメブロ間ではできないのでしょうか。
- ベストアンサー
- ブログ
- JavaScriptでテーブルをクリックするとPOST送信させる処理について
テーブルに表示されている値をマウスを利用して取得したいと 考えております。 質問箱及びいろいろ検索してみたのですが、いま一つ理解できません でしたので、お力添えの方宜しくお願い致します。 今回お教え願いたい処理と致しましては、単純にHTML内のBodyタグ内に 記述されている<td>テスト</td>の値をマウスでクリックすると取得 するというものです。 この処理に関しまして、検索すると多くのサイト、書籍が見つかり、 手法なども記述されていましたが、具体的な利用方法が見つけられず、 困っております。 参考サイトへの誘導も大歓迎ですので、宜しくお願いします。 備考：この処理の解決方法に >> tdに付けたイベントハンドラからXMLHttpRequestを呼ぶだけ。 引用サイト：「JavaScriptを教えてもらう」 というものがあったのですが、この利用方法が理解できませんでした。 大変お手数とは思いますが、利用方法をお教え願えれば幸いです。 何卒、宜しくお願い致します。
- ベストアンサー
- JavaScript
- FC2ブログの最新記事を常に表示するURL
一記事単位だと http://ブログ名.blog数字.fc2.com/blog-entry-数字.html ってなってますよね。 これで、そのURLをクリックすると 常に最新記事が表示されるURLってありませんでしょうか？。 これが私のブログの最新記事 http://ブログ名.blog数字.fc2.com/××× って貼りたいんです（貼ったらそのままにしておく）。 なければ、他の案でもいいので教えてください。 よろしくお願いします。
- ベストアンサー
- ブログ
- クリックでメニューを表示
初心者で申し訳ないのですがお答えいただけたらと思います。 親メニューに当たる画像orテキストをクリックして 指定箇所に子メニューを表示させ、 その子メニューをクリックしてリンクさせたいと思っているのですが JavaScriptでできるのかどうか、 もしできるのであればどう組めばいいのか よろしくお願いします。 形的には、 http://www.ozaki-gasrange.co.jp/cso_q1-3.html ↑ページのような感じで、 マウスを置いた時ではなく、クリックして 下にメニューを表示させて さらにそのメニューをクリックして右枠にページを 表示させたいと思います。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- ワードのチラシなどがクリックでみられるようにできますか？
ワードのチラシなどがクリックでみられるようにできますか？ ＦＣ２ブログを始めました。ブログにお知らせのチラシなど、ワードで書いたチラシを ＵＲＬみたいにクリックでみられるような貼り付けは無理でしょうか。 画像しかだめでしょうか。
- ベストアンサー
- ブログ
お礼
回答してくださいましてありがとうございます。 まさにこのタグです。本当に助かりました。 steel_grayさんとpipi_さんにはこの場を借りて深く感謝します！