折りたたみタグのスクリプト探し
- 折りたたみタグを使っているが、一つ開くと他の開いたタグが閉じるスクリプトを探している。
- 既に使用している折りたたみタグのスクリプトを少し修正したいが、うまく動かない。
- 他の折りたたみタグのスクリプトを探しているが、できれば修正だけで対応したい。
- ベストアンサー
折りたたみタグ 他を閉じる（非表示にする）
折りたたみリンクが複数ある場合で、 一つ開くと他の開いた折りたたみリンクが閉じる（常に表示されるのは一つだけ）スクリプトを探しています。 以下のタグを使わせて頂いてます。 function show(inputData) { var objID=document.getElementById( "layer_" + inputData ); var buttonID=document.getElementById( "category_" + inputData ); if(objID.className=='close') { objID.style.display='block'; objID.className='open'; }else{ objID.style.display='none'; objID.className='close'; } } <a href="javascript:void(0)" id="category_@@@@" onClick="show('@@@@');"> リンク </a> <div id="layer_@@@@" style="display:none" class="close"> 隠れた内容 </div> http://homepage3.nifty.com/kmyh/gaku/hyouzi2.html こちらで見つけたので、少しの修正でなんとかできないかと上記の使っている ものを少しずついじって試してみたのですが、動かなくなるだけでしたので、 丸々スクリプトを取り替えてみたのですが、何が悪かったのか動きませんでした…。 既にたくさん使用しているので、できれば丸々とりかえるのではなく、 簡単な修正で変更できたらいいなと思っております…。 ご助力よろしくお願い致します。
- rinoglda
- お礼率63% (14/22)
- JavaScript
- 回答数11
- ありがとう数6
- みんなの回答 （11）
- 専門家の回答
質問者が選んだベストアンサー
[ANo.1] さんの回答で、すぐに JavaScript がかけないなら、 ↓をつかうのは、止めたほうがいいかも。 http://homepage3.nifty.com/kmyh/gaku/hyouzi2.html ほかの人が書いた、JavaScript を修正しようとしても、DOM の操作(※)が自由にできなければ、どのみちすぐにまた、つまずくから。 ※ DOM の操作 http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html 今回の質問についてだけなら JavaScript ライブラリを使うことをすすめるよ。 『jQuery UI - Accordion Demos & Documentation』 http://jqueryui.com/demos/accordion/ (1) jQuery と jQuery UI をダウンロード http://jqueryui.com/download UI Core は次の 2個だけチェック [*] Core [*] Widget Interactions は全部チェックしない Widgets は次の 1個だけチェック [*] Accordion Effects は全部チェックしない 最後に Theme を [No Theme] に変更して、[Download] ボタンをクリック。 (2) ダウンロードした、JavaScript ファイル下のように配置する。 - HTML ファイル.html - jquery-1.5.1.js - ui/jquery.ui.core.js - ui/jquery.ui.widget.js - ui/jquery.ui.accordion.js (3) HTML ファイルの中の head タグで JavaScript を読み込む。 <head> <script src="jquery-1.5.1.js" type="text/javascript"></script> <script src="ui/jquery.ui.core.js" type="text/javascript"></script> <script src="ui/jquery.ui.widget.js" type="text/javascript"></script> <script src="ui/jquery.ui.accordion.js" type="text/javascript"></script> (4) つづけて、下のスクリプトを記述する。 <script type="text/javascript"> $(function() { $( "#accordion" ).accordion({ animated:false }); }); </script> </head> (5) 折りたたみをする部分を下のように記述する。 <div id="accordion"> <h3><a href="#">項目(1)のタイトル</a></h3> <div>項目(1)のコンテンツ</div> <h3><a href="#">項目(2)のタイトル</a></h3> <div>項目(2)のコンテンツ</div> <h3><a href="#">項目(3)のタイトル</a></h3> <div>項目(3)のコンテンツ</div> <!-- 必要なだけ h3 と div の繰り返し --> </div> おわり。
その他の回答 (10)
- mikemike7
- ベストアンサー率87% (97/111)
>正直ちんぷんかんぷんな初心者です。 >自分で解決できるよう頑張ります。 初心者でもわかるように。 現在のソースから変更できるように。 No2では記載したつもりですが。 No2のソース見ました？？？ No2を見て、どこを書き換えればわからない。 ということならお手上げです。 まあ、自分でなんとかするならそれも勉強。 頑張ってね＾＾ >『この 2つの回答って、つまり表現をかえて、同じことしてるだけだよね？』 そういうつもりで書いたわけじゃないですが、 まあ、そういう感じもしますねえ。 全ての方が、HTML、CSS、構造を理解できているとは限らないわけですし。 JavaScript関係の解説サイト見ても、こういうところを指摘しているサイトって少ないんじゃないですかねえ。 だから、むしろ理解できていない方のほうが多いように思います。 私も完全に理解できていませんし、 初めの頃は全く気にしていませんでした（＾＾； むしろJavaScriptと、HTML、CSSは全く別物だと思ってたかなあ
- dscripty
- ベストアンサー率51% (166/325)
まだ、閉じられてなかった！よかった。 [ANo.9] の訂正。 プログラマの事実を表していないので撤回。 『ちなみに、body にスクリプトを書 かないのは [ANo.3] がプログラマ というよりはデザイナ(※)よりだか らだよ。』 プログラマもデータとロジックの分離を尊ぶよね。
- dscripty
- ベストアンサー率51% (166/325)
「うーん……。」 ごめーん。コードに『あそび』がなかったから、どんな意図で書いたのか知りたくて、ちょっと突っついてみただけ。 ちなみに、body にスクリプトを書かないのは [ANo.3] がプログラマというよりはデザイナ(※)よりだからだよ。 どうしても表示が遅いのが気になるなら document の onload イベントの Listener 関数で src 要素を遅延ロードさせるかな？ (※ デザイナ) body 要素の中に、スクリプトや文書構造とは関係ないレイアウトの為の div 要素や id や class をつけるのを美しくないと感じたり、嫌悪する傾向がある。 「No3,No4の回答はもっともな話だと思いますが、」 『この 2つの回答って、つまり表現をかえて、同じことしてるだけだよね？』というみかたがあるのかぁ。そういわれればそうかも。 ※ コードのインデントは でつけようキャンペーン中！
- mikemike7
- ベストアンサー率87% (97/111)
また無駄にレスしてみたり...悪い癖... 質問内容では、参考URLにない、クラス名をclose、openに変更されているわけなので、そういうところも考慮して作っているのでしょう。 考慮していないとしたら、後から気づいて学習することでしょう。 それは一つの経験ですよね。 No3,No4の回答はもっともな話だと思いますが、 そもそもDOMとかCSSが理解できない段階だとしたら、 今後のことを考慮して作り直せと言う方が酷な気がします。 私が同じ状態だったら？？？？だと思うなあ。 わかってる人にとっては案外簡単なことでも、 わかってない人にとってみたら？？？なことはよくあるし。 質問内容の最後に、簡単に修正したいとあったし、それに応じたソースを提示し、今後のアドバイスとして書いていたら、スマートに解決してたんじゃないかなあとか思ったり。 と、レス伸ばしてるのは私のせいかもしれないけど...。 まあ、質問者さんもありがとうだけお礼があっただけなので、進展あったかどうかもわからないけど、いきなり別世界みたいな話されて諦めたのかなとか勝手に思ったり。 やってみれば以外と簡単に仕上がるかもよ。 頑張って＾＾
お礼
どうぞ、とされてるサイトから引用させて頂いていた スクリプトだったので、それぞれの意味は正直ちんぷんかんぷんな初心者です。 ご指摘通りなんだかわざわざ難しい上級者向けのように書かれて諦めました。 自分で解決できるよう頑張ります。ありがとうございました。
- Chaire
- ベストアンサー率60% (79/130)
うーん……。 No.4 の最初のコードは No.0 の a 要素の書き換えだけで済みます。『初期化はご自分で』と書いたのは、要するに style="display: none" を付ければ良いことに気づくかどうか、です（昔はこれもどうかと思っていましたが、今は許容しています）。実は『簡単な修正』で済むのですが、まあ。 後半はオマケですが、キー操作と音声ブラウザ対応を視野に入れています。案外簡単にできますでしょ？ で、No.2 に関してですが、 > var divobj = document.getElementsByTagName('div'); > for (var i = 0; i < divobj.length; i++){ > if (divobj[i].className == "open"){ 割といろんなサンプルで class="open|close" が濫用されていますし、ブログシステムなんかで div もかなり濫用されていますので、これだと絞り込みが大雑把すぎるのです。それで No.4 では探索範囲を絞って、かつ ID の先頭が同じもの（"section-" や "layer_"）だけを対象にしています。もし質問者氏が親ブロックを設けなければ、同階層を探索します。 別にコードの内容を理解する必要はないでしょう。ワープロを使うのに C++ を覚える必要はないですし、BBS を設置するのでさえ CGI/PHP の知識は必要ではありません。私としましては、初心者がそれをコピペし、参考にしても問題ないかどうかを一つの目標としています。どんなに長くてもコピペはすぐにできますし、それ以上何の設定もいらないようには作ってありますよ。 それと、No.3 は良いと思うのですが、(3) で head ではなく body 末尾、あるいはセクション末尾に外部ファイルをまとめて下さい。この場合、head にまとめるメリットがありませんし、むしろページ描画が遅くなるデメリットがあります。
- dscripty
- ベストアンサー率51% (166/325)
「質問の主旨とは違って、根本的に見直すように指摘されている方 もいますが、……」 心配するほどのことでは、ないとおもうよ。 質問者さんが、あのコードを選ぶなんてあり得ないでしょ？ ちなみに [ANo.3] は、質問者さんの選択の幅を、ひろげたかっただから、本気で DOM の操作を覚えるなら、まずは [ANo.2] さんのコードで、いろいろ試してみるといいとおもう。
- mikemike7
- ベストアンサー率87% (97/111)
質問の主旨とは違って、根本的に見直すように指摘されている方もいますが、全ての人がプロではないわけで、提供する目的も人それぞれ。 結局自分のやりたいことが実装できればそれで良いと私は思っています。 確かに質問内容に出てきたソースにはいろいろと問題があるかもしれませんが、それでも構築次第ではそれなりに動きます。 No2で提示したソースは、提示されたソースを元に書き換えたものですが、IE6～8、FireFox、クローム、Opera、Safariと主要なブラウザ全てで検証済みです。 全てのWEBページが完璧なはずもないわけで、完璧を目指そうと思えば相当な努力が必要になります。 プロでも完璧に程遠い人が多いのに初心者が完璧に近い形でできるわけがないですよね。 誰でも初めは初心者です。 初心者からいきなり上級者にはなれないわけで、向上心は必要だと思いますが、少しずつ知識や経験を深めて、ステップアップしていけばいいと私は思いますよ。 現時点でのソースを少し修正して実装したいということなら、No.2のソースで実現可能だと思いますので、良ければお試し下さい。 頑張って下さい＾＾
- Chaire
- ベストアンサー率60% (79/130)
ID があるなら活用すべきです。それと、href="javascript:..." なんてのは NN4 の遺物ですので、もう止めて下さい。 <a href="#section-1" onclick="return GAccordion.call(this, event);">ラベル 1</a> <a href="#section-2" onclick="return GAccordion.call(this, event);">ラベル 1</a> <a href="#section-3" onclick="return GAccordion.call(this, event);">ラベル 1</a> <div> <div id="section-1">...</div> <div id="section-2">...</div> <div id="section-3">...</div> </div> <script type="text/javascript"> // IE 5.5+ function GAccordion (e) { var c = e.currentTarget || this; var d = c.ownerDocument; var s; if ((s = c.getAttribute('href' /*@cc_on, 2@*/))) { var id = s.slice (1); var div; if ((div = d.getElementById(id))) { id = /^(.*)(\d+)$/.exec (id); if (id[2]) { var prefix = id[1]; var n; for (n = div.parentNode.firstChild; n; n = n.nextSibling) { if (n.nodeType === 1 && n.id && n.id.indexOf(prefix) === 0) { n.style.display = 'none'; } } div.style.display = ''; // CSSOM } } } return false; } </script> 初期化はご自分で。どの道、スクリプトが動かない利用者は一定数いますので、そういった場合の代替措置は絶対に必要です。それができないとしたら、下手に仕掛けなど設けない方が無難です。 --- 最近のブラウザなら（手抜き）。 <style type="text/css"> @media only screen { *[role~="tab"] { cursor: pointer; } *[role~="tab"][tabindex="0"] { font-weight: bold; color: #800; } *[role~="tabpanel"][aria-hidden="true"] { display: none; } } </style> <ul role="tablist"> <li role="tab" id="tab-1" tabindex="0">ラベル 1</li> <li role="tab" id="tab-2" tabindex="-1">ラベル 2</li> <li role="tab" id="tab-3" tabindex="-1">ラベル 3</li> </ul> <div role="group"> <div role="tabpanel" aria-labelledby="tab-1" aria-hidden="false">...</div> <div role="tabpanel" aria-labelledby="tab-2" aria-hidden="true">...</div> <div role="tabpanel" aria-labelledby="tab-3" aria-hidden="true">...</div> </div> <script type="application/javascript"> if (document.implementation && // document.implementation.hasFeature ('Selectors-API', '1.0') && document.implementation.hasFeature ('Events', '2.0') && document.implementation.hasFeature ('HTML', '2.0')) { var GAccordion = { handleEvent: function (e) { var t = e.target; var d = t.ownerDocument; if (this.isTab (t)) { var tab = t; switch (e.type) { case 'focus' : this.activate (tab, t.parentNode.querySelector ('*[role~="tab"][tabindex="0"]')); return; case 'keydown' : switch (e.keyCode) { case 0x26: // DOM_VK_UP for (t = tab; t = t.previousSibling; ) { if (this.isTab (t)) { t.focus (); break; } } return; case 0x28: // DOM_VK_DOWN for (t = tab; t = t.nextSibling; ) { if (this.isTab (t)) { t.focus (); break; } } return; } } } }, isTab: function (n) { return n.nodeType === Node.ELEMENT_NODE && n.getAttribute ('role') === 'tab'; }, activate: function (tab1, tab2) { var d = tab1.ownerDocument; var tp = '*[role~="tabpanel"]'; tab2.setAttribute ('tabindex', '-1'); Array.forEach (d.body.querySelectorAll (tp + '[aria-labelledby~="' + tab2.id + '"]'), function (tabpanel) { tabpanel.setAttribute ('aria-hidden', 'true'); }); tab1.setAttribute ('tabindex', '0'); Array.forEach (d.body.querySelectorAll (tp + '[aria-labelledby~="' + tab1.id + '"]'), function (tabpanel) { tabpanel.setAttribute ('aria-hidden', 'false'); }); } }; document.addEventListener ('focus', GAccordion, true); document.addEventListener ('keydown', GAccordion, false); } </script>
お礼
簡単な修正でできることではないのですね。 ご回答ありがとうございました。
- mikemike7
- ベストアンサー率87% (97/111)
とりあえず無駄なところは省きましょうね。 ><div id="layer_@@@@" style="display:none" class="close"> classで切り替えるのにdisplayをnoneにしたりblockにするのは効率がよくありません。 <style type="text/css"><!-- div.close{display:none;} div.open{display:block;} --></style> として <div id="layer_@@@@" class="close"> とするべきです。 そうすることで、HTMLに無駄な記載をしなくても良くなりますし、 JavaScript部でも無駄な処理がなくなります。 以下ソースです。 // CSS部 div.close{display:none;} div.open{display:block;} // JavaScript部 function show(inputData) { var objID=document.getElementById( "layer_" + inputData ); var buttonID=document.getElementById( "category_" + inputData ); if(objID.className=='close') { // OPENされているDIVを閉じる var divobj = document.getElementsByTagName('div'); for (var i = 0; i < divobj.length; i++){ if (divobj[i].className == "open"){ //divobj[i].style.display='none'; divobj[i].className='close'; } } //objID.style.display='block'; objID.className='open'; }else{ //objID.style.display='none'; objID.className='close'; } } // HTML部 <a href="javascript:void(0)" id="category_@@@@" onClick="show('@@@@');">リンク</a> <a href="javascript:void(0)" id="category_2" onClick="show('2');">リンク2</a> <a href="javascript:void(0)" id="category_3" onClick="show('3');">リンク3</a> <div id="layer_@@@@" class="close"> 隠れた内容 </div> <div id="layer_2" class="close"> 隠れた内容2 </div> <div id="layer_3" class="close"> 隠れた内容3 </div>
お礼
ご回答ありがとうございます。
- askaaska
- ベストアンサー率35% (1455/4149)
考え方はシンプルです。 リンクをクリックすると いったん全てのリンクを閉じます。 そしてクリックしたものだけ開けばOKです。 閉じると開くの方法が分かれば 簡単に実装できるかと思います。
お礼
回答ありがとうございます。 できれば例としてタグで教えて頂けますと幸いです。
関連するQ&A
- ツリーメニューで子のページのとき親が開く
他のプログラムと連携しています 現時点ではクリックすれば親が開き子の部分が出てくるようにしています。 子のページのＵＲＬを見たときに ツリーのその親は自動的に開きたいのです。 show('1');のこの”１”は他のプログラムから出力しているものです。 子のものも同じように値を出力できるのですが JavaScriptでどのように書けば親が開くのかよくわかりません＾＾；。 よろしくお願いします。 //javascript// function show(inputData) { var objID=document.getElementById( "obj_" + inputData ); var buttonID=document.getElementById( "button_" + inputData ); if(objID.className=='close'){ objID.style.display='block'; objID.className='open'; buttonID.src='images/close.gif'; } else{ objID.style.display='none'; objID.className='close'; buttonID.src='images/open.gif'; } } //HTML// <ul> <li><input type="image" src="images/open.gif" id="button_1" onclick="show('1');"> <a href="javascript:show(1)">Ａメニュー</a> </li> <div id="obj_1" style="display:none;position:relative;" class="close"> <ul><li><a href="11.html" >Ａ-1メニュー </a></li> <li><a href="12.html">Ａ-2メニュー </a></li> <li><a href="11.html" >Ａ-3メニュー </a></li> </ul> </div> </ul> <ul> <li><input type="image" src="images/open.gif" id="button_2" onclick="show('2');"> <a href="javascript:show(2)">Ｂメニュー</a> </li> <div id="obj_2" style="display:none;position:relative;" class="close"> <ul><li><a href="21.html">Ｂ-1メニュー </a></li> <li><a href="22.html">Ｂ-2メニュー </a></li> <li><a href="23.html">Ｂ-3メニュー </a></li> </ul> </div> </ul>
- 締切済み
- JavaScript
- java折りたたみタグを複数設置したい
僕のホームページには今、javaの折りたたみを使っています。 一応今は、 <!--/以下javaによる開閉/--> <script language="javascript" type="text/javascript"><!-- var flag=0; function popShow(){ if(!flag){ document.getElementById("prof").style.display="block"; flag=1; } else { document.getElementById("prof").style.display="none"; flag=0; } } //--> </script> <a href="javascript:popShow();">開く</a> <div id="prof" style="display:none;"> <!-- ここから開く --> ここが内容になるようにしています。 <!-- /ここから開く --> </div><!--/以上javaによる開閉/--> このようなタグを使っているんですが、同じページにコピーして二つ設置してみたら片方のみ開いてもう片方は開かない、という状況に陥ってしまいました。 こうなってしまうと複数設置する意味がなくなってしまうのでどうにかできないものでしょうか？ ご返答宜しくお願いします。
- 締切済み
- レンタルサーバ・ASP
- 文の折りたたみ
ブログなどでよくある「続き」を折りたたみで表示する方法を教えて下さい。 ググってみたのですが、ブログのテンプレしか見つけられず、それを普通のページにどう応用したらいいのかがサッパリ分かりません。 ヘッダに <script type="text/javascript"> <!-- function showMore(varA1, varB1){ var123 = ('varXYZ' + (varA1)); varABC = ('varP' + (varA1)); if( document.getElementById ) { if( document.getElementById(var123).style.display ) { if( varB1 != 0 ) { document.getElementById(var123).style.display = "block"; document.getElementById(varABC).style.display = "none"; } else { document.getElementById(var123).style.display = "none"; document.getElementById(varABC).style.display = "block"; } } else { location.href = varB1; return true; } } else { location.href = varB1; return true; } } //--> </script> …と記述するのは分かったのですが、本文中をどうすればいいのか… お願いします。
- 締切済み
- JavaScript
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
- div要素をランダムに表示させたい
お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }
- ベストアンサー
- JavaScript
- 常にひとつだけ詳細表示する！の回答なのだけれど
<html> <head> <style> .show {display:block;} .hide {display:none;} </style> <script> function yomu(n){ oj=document.getElementById('a').getElementsByTagName('DIV'); for(var i in oj) oj[i].className=(i==n)?'show':'hide'; } </script> </head> <body> <div id="a"> <a href="#" onClick="yomu(0)">A</a><br> <div class="hide">Aの詳細</div> <a href="#" onClick="yomu(1)">B</a><br> <div class="hide">Bの詳細</div> <a href="#" onClick="yomu(2)" >C</a><br> <div class="hide">Cの詳細</div> </div> </body> </html>
- 締切済み
- JavaScript
- 折たたみメニューの表示・非表示
JavaScriptで下記のような折りたたみ（階層）メニューを作成しています。 <script type="text/javascript"> <!-- /* ブラウザ判別 */ var ie=document.all ? 1 : 0; var ns6=document.getElementById&&!document.all ? 1 : 0; var opera=window.opera ? 1 : 0; /* 子メニューの表示・非表示切替 */ function openFolder(childObj, parentObj){ var child=""; var parent=""; var sw="../../images/blanc.gif"; /* フォルダ表示時のアイコン画像 */ var hd="../../images/blanc.gif"; /* フォルダ非表示時のアイコン画像 */ if(ie || ns6 || opera){ child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style; parent=ns6 ? document.getElementById(parentObj) : document.all(parentObj); if (child.display=="none"){ child.display="block"; parent.src=sw; }else{ child.display="none"; parent.src=hd; } } } //--> </script> <div id="open_1" style="display:none;"> <a href="01.html"><img src="images/list_01.gif"></a><br> <a href="02.html"><img src="images/list_02.gif"></a><br> </div> <div id="open_2" style="display:none;"> <a href="03.html"><img src="images/list_03.gif"></a><br> <a href="04.html"><img src="images/list_04.gif"></a><br> </div> <div id="open_3" style="display:none;"> <a href="04.html"><img src="images/list_03.gif"></a><br> <a href="05.html"><img src="images/list_04.gif"></a><br> </div> ここで、<div id="open_1">内のリンクをクリックして01.htmlに遷移した際、01.htmlでも<div id="open_1">内の階層が表示されているようにしたいのです（下のふたつの階層についても同じです）。 過去ログなどを調べまして、 <script type="text/javascript"><!-- function keepOpen(){ document.getElementById('x').style.display = "block"; document.getElementById('y').style.display = "block"; }keepOpen(); //--></script> を挿入すればいけそうでやってみたのですが、今度は開きっぱなしになってしまいます。二日ほど調べたのですが、よい解決策が見つかりません（また、<div>の中のソースはすでにphpのコードを組込んでいるので、できれば中の部分はいじりたくありません）。 お詳しい方、大変恐れ入りますが、どうぞご教示くださいませ。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jabascriptの表示・非表示について
初心者です。 このタグでは、最初から「ここを表示する」が表示されるのですが、最初は表示されずに、「表示」ボタンを押すと初めて表示されるようにするにはどのようにすればいいのでしょうか。。 <p> <a href="#" id="link_view2" onClick="toggle_view2();return false;" style="display:none;">表示</a> <a href="#" id="link_hidden2" onClick="toggle_hidden2();return false;">非表示</a> </p> <div id="area_hoge2"> <p>ここを表示する</p> </div> <script language="JavaScript" type="text/javascript"> <!-- var elem2_1 = document.getElementById("area_hoge2"); var elem2_2 = document.getElementById("link_view2"); var elem2_3 = document.getElementById("link_hidden2"); function toggle_view2() { elem2_1.style.display = ""; elem2_2.style.display = "none"; elem2_3.style.display = ""; } function toggle_hidden2() { elem2_1.style.display = "none"; elem2_2.style.display = ""; elem2_3.style.display = "none"; } --> </script> 参考 http://pentan.info/javascript/sample/view_hidden.html 詳しい方お教えください<m(_ _)m>
- ベストアンサー
- JavaScript
- フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください
フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください こんにちは、よろしくお願いします <HEAD> <script src="http://maps.google.com/maps?file=api&v=2&key=googleマップキー" type="text/javascript" charset="utf-8"></script> </HEAD> <FORM> <div id="default-open"> <a href="javascript:;" onclick="document.getElementById('default-close').style.display='block'; document.getElementById('default-open').style.display='none';"> オプションを追加する</a> </div> <div id="default-close" style="display: none;"> <a href="javascript:;" onclick="document.getElementById('default-open').style.display='block'; document.getElementById('default-close').style.display='none';"> 閉じる</a><br> <div id="map" style="width:300px; height:300px; margin-left: 0px; margin-top:0px;"> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(36.033333, 139.15), 8); } //]]> </script> </div> </FORM> 「オプションを追加する」をクリックしたら、javascriptで下側にgoogleマップAPIが現れるといったコンテンツを作っています マップの表示はできるのですが、中のマップの表示がどうしてもずれたような感じになってしまいます 灰色の帯のようなものがマップの周囲に出てきて、きちんと読み込まれて無いように見えます <div id="default-close">の外側に出すときちんと表示できるので、CSSで制御できないかと頑張ってみましたがうまくできません 上側の<div>タグで細工したのがずれる原因ではないかと思うのですが・・・ 誰かこの問題について分かる方はいないでしょうか
- ベストアンサー
- JavaScript
- 「ポタン」で表示・非表示 (つづき)(^^;
「ポタン」で表示・非表示 ブロック<Div></Div>の「表示・非表示」を「ポタン」でやりたいのですが。。の件で、下記の回答をいただき、できたのですが、 最初に「★非表示」の状態にしたい場合は、どうしたらいいのでしょうか? よろしく願いいたします。 <html> <body> <div id="a">abcdefg</div> <input type="button" value="on/off" onClick="disp('a')"> <hr> <div id="b">abcdefg</div> <input type="button" value="on/off" onClick="disp('b')"> <hr> <script> function disp(id){ // alert(document.getElementById(id).style.display=='none'?'block':'none'); document.getElementById(id).style.display = document.getElementById(id).style.display=='none'?'block':'none'; } </script>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。