表示レイヤーの切り替え
- クリックで表示レイヤーの切り替えをしたいと考えています。イメージとしては下記のサイトに近いのですが、1つのレイヤーにしか対応していないので複数のレイヤーに対して行いたいです。
- 例えばid test01～test10 までの10個のレイヤーがあるとして、メニュー1をクリックすると、test1とtest2を表示させ他は非表示、メニュー2をクリックすると、test3とtest5とtest10を表示など汎用性を持たせたいです。
- 上記サイトのスクリプトを改造する等で実現できますでしょうか？ご教授お願いします。
- ベストアンサー
表示レイヤーの切り替え
クリックで表示レイヤーの切り替えをしたいと考えています。 イメージとしては下記のサイト http://mugi.cc/js/001206.htm （管理人さん不在のようで） に近いのですが、1つのレイヤーにしか対応していないので 複数のレイヤーに対して行いたいです。 例えばid test01～test10 までの10個のレイヤーがあるとして、 メニュー1をクリックすると、test1とtest2を表示させ他は非表示、 メニュー2をクリックすると、test3とtest5とtest10を表示など 汎用性を持たせたいです。 上記サイトのスクリプトを改造する等で実現できますでしょうか？ ご教授お願いします。
- ebifly
- お礼率75% (15/20)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
たとえばこんな感じ <html> <head> <script language="javascript"> function view(array){ for(var i=1;i<=10;i++){ document.getElementById("test"+i).style.display="none"; } for(i in array){ document.getElementById("test"+array[i]).style.display="block"; } } </script> <style type="text/css"> div.defaultdev{ display:none; } </style> </head> <body> <form> <input type="radio" name="test" onClick="view(Array(1,2))">1,2を表示 <input type="radio" name="test" onClick="view(Array(3,5,10))">3,5,10を表示 <input type="radio" name="test" onClick="view(Array(4,7,8))">4,7,8を表示 </form> <div id="test1" class="defaultdev">test01</div> <div id="test2" class="defaultdev">test02</div> <div id="test3" class="defaultdev">test03</div> <div id="test4" class="defaultdev">test04</div> <div id="test5" class="defaultdev">test05</div> <div id="test6" class="defaultdev">test06</div> <div id="test7" class="defaultdev">test07</div> <div id="test8" class="defaultdev">test08</div> <div id="test9" class="defaultdev">test09</div> <div id="test10" class="defaultdev">test10</div> </body> </html>
関連するQ&A
- アクションスクリプトでレイヤーの表示非表示の切り替え
タイトルどおりの諮問です。 どなたかアクションスクリプトでレイヤーの表示/非表示の切り替えの方法を教えていただけないでしょうか？
- ベストアンサー
- Flash
- 表示したレイヤー以外をクリックした時にレイヤーを消す方法
レイヤーを使用して入力補助を作成しようと思っています。 大まかにはできたのですが、 入力補助用のレイヤーを表示したあと、 全然関係ないところをクリックした時に レイヤーを閉じさせたいのですが実装イメージが 分かりません。 動き的には以下のページにあるような形にしてみたいです。 http://javascript.maxux.com/js037.htm 以下のページはdojoを使用しており、 具体的な処理はちょっと追いきれなかったので 考え方を教えていただけたらと思います。 どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- リンクレイヤー表示の切り替えについて
もともとは1つのリンクメニューの表示と非表示を切り替える書籍のサンプルを2つのリンクメニューを同じ場所に切り替え表示させるよう修正を行ってみました。 ですが、リンク(1)を表示させてからリンク(2)をさせるにはリンク(1)を再度クリックし、一度非表示にしないとリンク(2)が表示されません。 リンク(1)の表示から直接リンク(2)の表示に切り替えるようにしたいのですがどなたかご教授願えませんでしょうか。 <html> <head> <SCRIPT Language="JavaScript"> <!-- types = "hidden"; function pullDownMenu(tagName,x,y) { if (types == 'hidden') types = 'visible'; else types = 'hidden'; if (document.layers) document.layers[tagName].visibility = types; if (document.all) document.all(tagName).style.visibility = types; } // --> </SCRIPT> </head> <body> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag1"> <TT> <A HREF="http://a.co.jp">サイトA</A><BR> <A HREF="http://b.co.jp">サイトB</A> </TT> </DIV> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag2"> <TT> <A HREF="http://c.co.jp">サイトC</A><BR> <A HREF="http://d.co.jp">サイトD</A> </TT> </DIV> <table> <tr> <td> <A HREF="sample.htm" onClick="pullDownMenu('tag1');return false">リンク(1)</A> <A HREF="sample.htm" onClick="pullDownMenu('tag2');return false">リンク(2)</A> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- タブの切り替えは・・・
JavaScript で タブ切り替えのようなものを実現したいのですが、 いいやり方はないでしょうか。 ・ 「耳」をクリックすると、表示されているテーブル内 の表示が次々変っていくようなものがあれば、願ったり 叶ったりです。 擬似的なもので結構ですので、参考となるスクリプト 等があればご紹介いただければ幸いです。m(__)m
- ベストアンサー
- JavaScript
- レイヤーの非表示
よろしくお願いします。 本文中に <div id="test" style="DISPLAY:none;POSITION:absolute;"> </div> としてあり、何らかのイベントを受けたらjavascript内で、 objTest=document.getElementById('test'); objTest.style.display='block'; と表示したレイヤーを今度は非表示にする場合、 表示したレイヤー、例えばHTMLテーブルを表示した場合そのテーブル以外の場所をクリックしたというイベントを拾うことは可能でしょうか？ フォームにテキストが入力された時、テーブルが表示されその中にあるテキスト（リンク）をクリックした場合、入力補完される。リンク以外をクリックした場合（入力補完をせず、他の動作に移ったとき）テーブルが消えるイメージです。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- JWcadのレイヤーグループ表示について
ａｕｔａｏｃａｄユーザーでＪＷｃａｄの学習をしています。 レイヤーグループのツールバーで左クリックの操作により 表示・非表示の切り替えができますが・・・ 完全非表示（ボタンは白紙）とは違って×表示にするにはどうするのでしょうか？ おそらく、切り替えができない状態だと思いますが ×表示と解除の方法が知りたいです。 また、×表示に左上部に線があるのは文字データがあるにも関わらず そのレイヤーグループを必要ないもの（作業に関係ないけど保存が必要）として 他のレイヤーグループと区別していると解釈するのでしょうか？ 徹底解説操作編を使っていますが×表示には触れていないので 何方か教えて下さい。
- ベストアンサー
- CAD・DTP
- 表示/非表示の切り替え
AAA、BBB、CCCの３つが縦に並んでいるとします。 ここで、あるボタンをクリックすると、BBBが消えるようにしたいです。 JavaScriptを使用して、以下のようなものを作ってみましたが、これだと、BBBが消えたスペースが空白として残ってしまいます。 スペースを残さずに、AAAとCCCを詰めて表示させたいのですが、何か方法はありますでしょうか？ ====================================================================== <html> <body> <SCRIPT LANGUAGE='JavaScript'> <!-- function showLAYER(idName){ document.getElementById(idName).style.visibility = 'visible' } function hiddenLAYER(idName){ document.getElementById(idName).style.visibility = 'hidden' } //--> </SCRIPT> <A HREF="javascript:showLAYER('layer1')">[表示]</A> <A HREF="javascript:hiddenLAYER('layer1')">[非表示]</A> <br><br> AAA<br> <DIV ID = "layer1" > BBB </DIV> CCC<br> </body> </html> ======================================================================
- ベストアンサー
- JavaScript
- NN7.0でレイヤーの表示・非表示
レイヤーの表示・非表示のスクリプトなんですが、 function OpenLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="visible"; } //IEの場合 else { content_menu.style.visibility="visible"; } } function CloseLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="hidden"; } //IEの場合 else { content_menu.style.visibility="hidden"; } } に書きました。 IE6.0では動作しますがNN7.0では何も起こりません。 どなたかどのように表記をすればいいのか教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトメニューでレイヤーの切り替え
<html> <head> <title>実験用</title> </head> <script language="javascript"> <!-- function sel(flg){ flg.style.display = "block"; } //--> </script> <body> <select onChange="sel(this.value)"> <option value="aaa">その１ <option value="bbb">その２ </select> <div id="aaa" style="display:none;background:skyblue">ああああああああああああああ</div> <div id="bbb" style="display:none;background:skyblue">いいいいいいいいいいいいいい</div> </body> </html> このスクリプトは動かないのですが、イメージとしては セレクトメニューで選んだら、それに対応したレイヤーを 表示させたり、非表示にしたりしたいのです。 環境はWinXP,IE6とMac9.2.2,IE5.1です。 何かいい方法は無いでしょうか。
- ベストアンサー
- JavaScript
- レイヤーをドラッグ＆リンクしたい
http://hfm-kenchan.com/Lesson/log_qa/D0507204.htm の「depths0.fla」を使ってレイヤーがドラッグできるＦｌａｓｈを作っています。 ２回クリックしたときgetURLでページにリンクさせたいのですが、 なかなかうまくいきません。 どのようなアクションスクリプトをつかったら いいでしょうか？ 教えてください。
- ベストアンサー
- Flash
お礼
yambejp様 ありがとうございます。 まさに私が求めていたスクリプトそのものです。 さっそく使わせていただきます。 ありがとうございました。