JavaScriptで複数の表示・非表示切り替え
- JavaScript(jQuery)を利用した表示・非表示を切り替える方法についてご教示願います。初期状態では表示されており、ボタンを押すと表示・非表示を切り替えられ、１ページ内に複数のボタンを設置して、１つのボタンで複数個所のエリアの表示・非表示ができる方法を知りたいです。また、エリアの表示・非表示をクッキーに保存する方法やコードの簡略化についても教えてください。
- 私はJavaScript(jQuery)を使って表示・非表示を切り替える方法を探しています。具体的には、初期状態では表示されており、ボタンを押すと表示・非表示が切り替わるような仕組みを作りたいです。さらに、１ページ内に複数のボタンを設置し、１つのボタンで複数個所のエリアの表示・非表示を切り替えられる方法も知りたいです。また、エリアの表示・非表示の状態をクッキーに保存する方法や、コードを簡略化する方法についても教えていただきたいです。
- JavaScript(jQuery)を使用して表示・非表示を切り替える方法について教えてください。初めの状態では表示されており、ボタンをクリックすると表示・非表示が切り替わるような仕組みが欲しいです。また、同じページに複数のボタンを設置し、１つのボタンで複数のエリアの表示・非表示を切り替える方法も知りたいです。また、クッキーを使用してエリアの表示・非表示の状態を記録し、コードを簡潔にする方法についても教えていただきたいです。
- ベストアンサー
javascriptで複数の表示・非表示切り替え
どなたかご教授願います。 javascript(jQuery)を利用した表示・非表示を切り替えるやり方はいろいろあると思うのですが、私が思うようなものが実現できません。 個人的ポイントは、 初期状態では表示された状態 ボタンを押すごとに表示・非表示を切り替えられる １ページ内に複数ボタンを設置 １つのボタンで複数個所のエリアの表示・非表示を適用する ボタンから離れた場所のエリアを表示・非表示にする 状態をクッキーに保存する コードの可能な限りの簡略化 (※構築イメージは添付ファイルを参照ください。) です。よろしくお願い致します。 参考にした質問・知恵袋・サイト様 (1) http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12114911402 (2) http://blog.caraldo.net/2009/03/jqcookiemenu.php (3) http://okwave.jp/qa/q7259699.html →(1)複数ボタンを設置する場合は、それだけコードを増やさなければならない。また、１つのボタンで適用されるのは１ヵ所のみ。 →(2)複数ボタンの設置のコードは(1)に比べ少なくて済むが、こちらも１つのボタンで適用されるのは１ヵ所のみ。 →(3)１つのボタンで複数個所を非表示にすることが出来るが、再び表示する場合にはクッキーを初期化しなければならない。また、コードが隣接していなければならない。 (※一部コードを書き換えれば実現可能かもしれませんが私の理解レベルではこれが限界です。申し訳ありません。)
- shiroto_4610
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
どのようなマークアップを想定しているのかも不明なので、ひとつの考え方の例として簡略化したサンプルを… クッキーは考慮していませんが、その時の状態を保存する部分と、初期表示を追加する感じ。 ご質問文にいろいろと書いてはありますが、例えば『エリアＡ（非表示）、エリアＢ（表示）』の状態で、ボタンＢを操作するとどうなるのかなどが不明です。とりあえず、常にその時の状態の反転（トグル）になると仮定。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> body{ width:800px; } div.articles{ width:700px; float:left; } div.article{ height:250px; position:relative; border:1px solid gray; } #A, #B, #C { width:500px; height:100px; position:absolute; right:10px; bottom:10px; background-color:#DDD; } div.buttons{ width:95px; float:right; } div.buttons button{ width:100%; display:block; margin-bottom:10px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("div.buttons button").click(function(){ $(this.value).slideToggle(); }); }); </script> </head> <body> <div class="articles"> <div class="article"> 記事 <div id="A">（area A）</div> </div> <div class="article"> 記事2 <div id="B">（area B）</div> </div> <div class="article"> 記事3 <div id="C">（area C）</div> </div> </div> <div class="buttons"> <button type="button" value="#A">area A</button> <button type="button" value="#A,#B">area A&B</button> <button type="button" value="#B,#C">area B&C</button> <button type="button" value="#A,#C">area A&C</button> <button type="button" value="#A,#B,#C">area A&B&C</button> </div> </body> </html>
その他の回答 (1)
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
作成依頼ってことかな？ http://lancers.jp こういったところで作ってもらうレベルだと思うよ。
お礼
自己解決しました。ありがとうございました。
関連するQ&A
- OKWaveの表示について
環境は FireFox + Stylish です やりたい事としては OKWaveの表示で 初めから全ての回答を全文表示にしたい というものです 同じような質問として http://okwave.jp/qa/q8903796.html .a_textarea.qa_no_display_area .a_textarea.qa_display_toggle_area, あたりの表示・非表示を設定して特定ページでは実現できたのですが 幾つかのページを移動させたところ 全文表示で必ず片方を表示にすればいい というわけにはいかなそうだということが分かりました FireDebugでHTMLの該当部分を確認すると添付画像のような情報となります 画像中の <div class="user_area"> の下の a_textarea qa_display_toggle_area をチェックして a_textarea qa_display_toggle_area なら スタイルAを適用 そうでない(a_textarea qa_display_area)ならスタイルBを適用 とできればうまくできそうなのですが そういったことができるのか できるとしたらどのような記述をすればいいのかが分かりません （判定の部分をどうすればいいのかが分からない） もし自分も同じことやっている・こうすればいいなど分かる方がいたら 情報をいただけないでしょうか
- 締切済み
- ブラウザ
- CSSで背景画像をランダムに同画像を複数個所に表示
http://okwave.jp/qa/q4805263.html を参考にjavascriptと id="main"を設定して、1か所は動作しました。 そこで、同時に同じ画像を別の場所にも表示しようと、 複数の場所に id="main"を指定したら、 そのページの1番上部にある id="main"の設定箇所しか動作しません。 行いたいことは、 同時に同じ画像を複数個所に表示する方法はないでしょうか。
- 締切済み
- HTML
- 【HTML】複数ファイルを１ファイルにしたい
ブログなどで「いいねボタン」を設置するにあたり、 記事ごと（１ページ毎）にいいねボタンを設置する方法は分かったのですが、 １ページ（sample.html）に記事が複数載っている場合、 その記事ごとに「いいねボタン」を設置することはできますか？ 複数のファイルを見た目的に1ファイルにすれば やりたいことが実現できるのかと思い、 「フレーム」の技術を利用すれば いいねボタンを設置したそれぞれの１ファイルを、 見た目的に一つのファイルに統合することができるのかなと思いましたが よりスマートな方法があればぜひ、ご教授ください。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- 複数のボタンで１つのエリアに複数画像を切り替える
メインで表示する画像のエリアが１つあります。 複数のボタンを設置しクリックすることでそこに表示される画像を切り替えたいのです。 説明が難しくてすみません。 例 □（表示される画像：始めはデフォルト） ■1 ■２ ■３ ■４ （←ボタン） =================== ■１をクリックすると□に□１の画像が表示。 ■2をクリックすると□に□2の画像が表示。 ■3をクリックすると□に□3の画像が表示。 ■4をクリックすると□に□4の画像が表示。 =================== ということをやりたいのですが、どう検索していいのか分かりません。 「クリッカブルマップ」ばかりヒットして目当ての参考urlが見つかりません。 このやり方の名称とかあれば教えて下さい。 よろしくお願いします。
- ベストアンサー
- CSS
- 複数のボタンを配置し、それぞれにイベント処理をつける
よろしくお願いします。 javaを使った文字入力プログラムを作っているのですが、どうしても分からず質問させて頂きたいと思います。 「あ」から「ほ」までの合計３０個のひらがなの文字が書かれたボタンを、５つ×６行で設置し、クリックするとそのボタンの文字がテキストボックスに入力される・・・という設計にしたいです。 もちろん１つずつソースを書けばできるのですがそれではコードが冗長になってしまうので、できるだけ簡略化してループ処理などで実現できればと考えています。 設置するボタンはひらがなボタン３０個に加え、テキストボックスをリセットするボタン、クリックするとダイアログメッセージを表示させるボタンの計３２個です。 時分でもいろいろ調べてみたのですが分からずじまいです。 どうかよろしくお願いいたします！
- ベストアンサー
- Java
- htmlで文字列をクリップボードにコピーしたい
簡単な文字列をHTMLを使ってクリップボードにコピーしたいのですが、なかなかうまくいきません。 IEでHTMLを起動させて、コピペして使いたいのですが。 ポイントは… ・改行しても認識してそのまま文字列をコピーできること ・ボタンを一つのHTMLページ内に複数設置したいこと(なのでおそらく名前をボタンごとにつけるのだと思いますが…) http://auctempnavi.fc2web.com/waza/copy.html 上記のやり方では一応可能でしたが、テキストエリアが邪魔なのと、ボタンを横に並べたくても縦方向に追加されてしまう…という部分で行き詰りました。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q107558700 上記の形だと理由は不明なのですが、改行を認識してくれない。うまく起動するときとしないときがある(もしかしたら名前付けがうまくいっていないのかも知れません) どなたか知恵を貸して頂ければ幸いです。
- ベストアンサー
- HTML
- 複数の音源を複数のスピーカーから出力させたい
複数の音源を複数のスピーカーから出力させたいと考えています。 一番原始的な方法であれば，複数個の音楽プレイヤーと複数個のスピーカーをそれぞれつなげればよいのですが，その場合音楽プレイヤーを再生（再生ボタンを押す）させるために人が複数必要になります。 やりたいことは PC等に音源がある状態で，音源１をスピーカー１から，・・・音源nをスピーカーnから出力させるように設定し，PC側で再生ボタンをクリックすれば一斉に音源達がそれぞれのスピーカーから出力される ということです。当然，停止ボタン等もPC等からボタン１つで行いたいです。 これを実現できる方法はないでしょうか。 ソフトやハードがあれば教えてください。 専門性の高い計測器であれば実現できるのですが，確か100万以上するので予算的に不可能です。 できれば数万円以内で実現できればと考えています。
- 締切済み
- オーディオ
- 複数の音源を複数のスピーカーから出力させたい
複数の音源を複数のスピーカーから出力させたいと考えています。 一番原始的な方法であれば，複数個の音楽プレイヤーと複数個のスピーカーをそれぞれつなげればよいのですが，その場合音楽プレイヤーを再生（再生ボタンを押す）させるために人が複数必要になります。 やりたいことは PC等に音源がある状態で，音源１をスピーカー１から，・・・音源nをスピーカーnから出力させるように設定し，PC側で再生ボタンをクリックすれば一斉に音源達がそれぞれのスピーカーから出力される ということです。当然，停止ボタン等もPC等からボタン１つで行いたいです。 これを実現できる方法はないでしょうか。 ソフトやハードがあれば教えてください。 専門性の高い計測器であれば実現できるのですが，確か100万以上するので予算的に不可能です。 できれば数万円以内で実現できればと考えています。
- 締切済み
- オーディオ
- 表示されるフォントが丸ゴシックになる
Windows XP IE6.0 例えば↓のサイトですが、私のPCでは 丸ゴシックで表示されます。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14991269 Yahoo知恵袋は質問のページは全て丸ゴシックで表示されますし、 Yahoo知恵袋だけではなく、他のサイトでも丸ゴシックで表示されることがあります。 ↓も参考にしたのですが、治りません。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1122067806 よろしくお願いします。
- ベストアンサー
- ブラウザ
- javascript html 文字数数える
下の動作をするhtmlファイルのコードを教えてください。 テキストエディタに貼り付けて保存して拡張子をhtmlして実行すれば上記の動作をするコードという形で教えていただけるとありがたいです。 https://uji9kghkkui8uyeddikoioooojifte.web.fc2.com/index.html にアクセスし、そのページのソースの文字数を調べ、999文字以下だったら再読み込み。 1000文字以上の文字数が表示されるまで再読み込みと文字数計測を繰り返す。 文字数計測はjavascriptのDOMContentLoadedを使ってhtml読み込み直後に行ってください。 firefoxで実行します。 丸投げですみません。 なお、 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q111835240... を参考に自分でやってみようとしましたができませんでした。
- 締切済み
- HTML
お礼
jQueryのshowhide.jsを使って希望のものが実現できました。お手数をおかけしました。
補足
ご回答ありがとうございます。 ご質問の件について返答させていただきます。 >例えば『エリアＡ（非表示）、エリアＢ（表示）』の状態で、ボタンＢを操作するとどうなるのかなどが不明です。 『エリアＡ（非表示）、エリアＢ（非表示）』となります。 ボタンＢを押してもエリアＡにはまったく干渉せず、エリアＢのみ表示→非表示→表示→…の繰り返しを想定しております。 コードをお書きいただきましたが、 <div class="articles"> <div class="article"> 記事 <div id="A">（area A）</div> </div> <div class="article"> 記事2 <div id="B">（area B）</div> </div> <div class="article"> 記事3 <div id="B">（area B）</div> ←ここもBになり </div> </div> <div class="buttons"> <button type="button" value="#A">area A</button> <button type="button" value="#B">area B</button> ←このボタンを押すことにより記事2と記事3の(area B)両方に影響があるものを考えています。 </div> ★ボタンＡを押した場合のイメージ ///before/// 記事 （area A） 記事2 （area B） 記事3 （area B） [ボタンA]ポチッ [ボタンB] ///after/// 記事 記事2 （area B） 記事3 （area B） ★ボタンＢを押した場合イメージ ///before/// 記事 （area A） 記事2 （area B） 記事3 （area B） [ボタンA] [ボタンB]ポチッ ///after/// 記事 （area A） 記事2 記事3 ３つ目のidがBでないといけない理由は記事欄のhtmlコードは共通で、どれも同じものになるためCDEF…と増やせません。