動かない理由を解明！JavaScriptで要素表示制御のトラブルシューティング
- HTMLの要素をJavaScriptで表示制御する際に、要素が正しく表示されないトラブルが発生しています。
- 特に、「BをクリックしてAを消す、Bを出す」という操作が上手く動作せず、困っています。
- 問題解決のために、以下の点について確認してください。 1. 全て閉じられている場合、対象要素を開く処理が正しく行われているか 2. 対象要素が開いている場合、対象要素を閉じる処理が正しく行われているか 3. 対象要素が閉じられている場合、全ての要素を閉じる処理と対象要素を開く処理が正しく行われているか
- ベストアンサー
動いてもよさそうなのに動かないのでどこが悪いか見て下さい。
例：Aをクリックして表示 BをクリックしてAを消す、Bを出す。この時Bが出ずにはまる。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- .hide {display:none;} .show {display:block;} --> </style> <script type="text/javascript"> <!-- var flag=0; function red(a){ id="more"; mor = document.all.item(id,a) if (flag == 1){ if(mor.className=='show'){ mor.className="hide"; flag=0; } else { for (i = 0; i <= document.all.item(id).length; i++){ document.all.item(id,i).className="hide"; if(i == document.all.item(id).length){mor.className="show";} } } } else if(flag == 0){ mor.className="show"; flag=1; } } //--> </script> </head> <body> 例： 何もないときとりあえず今回はAを押すとAが開く(flag=0<br> Aがあいてる時、Aを押すとAを閉じる(flag=1 document.all.item(id,a).className=='show'<br> BやCを押すとAを閉じてBやCを開く(for文<br> for文のところのshowが上手くいかない。<br><br><br> <a href="javascript:red(0);">A</a> <div id="more" class="hide">Aの詳細</div> <br> <a href="javascript:red(1);">B</a> <div id="more" class="hide">Bの詳細</div> <br> <a href="javascript:red(2);">C</a> <div id="more" class="hide">Cの詳細</div> <br><br>概要<br> 1全部閉じてたら対象を開く<br> <br> 2-Yes対象が開いてたら対象を閉じる、1へ<br> <br> 2-No対象が閉じていたら全て閉じるfor文<br> 対象を開く//ここが上手くいかない<br> <br><br><br> ※対象はred(a)のdocument.all.item(more,a).classNameがshow（開）かhide（閉）か<br> ここの(more,a)のaは「a」番目のid「more」をもったオブジェクトのこと </body> </html>
- idhokanohi
- お礼率58% (48/82)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
さっきの質問に対してサンプルを書いている途中で締め切られてしまい、 回答できなくなってしまっていました。 なので、再度書かせていただきます。 何故か、 document.getElementsByName('more'); でdiv要素のname属性を取得できず(調べてみるとどうやら本来は div要素にname属性は指定できない模様) document.getElementsByTagName('div'); でdiv要素を一度取得してこれをループ処理し、name属性が'more'の もののみを配列に格納してそれをループ処理させることで無理矢理 実現させてみましたがこれでどうでしょうか。 // JavaScript function yomu(t) { // 配列オブジェクトを作成 var more = new Array(); // div 要素をすべて取得 var divs = document.getElementsByTagName('div'); // div 要素の中から name 属性が 'more' であるものを // 配列に入れる for(var i = 0; i < divs.length; i++) { if(divs[i].name == 'more') { more.push(divs[i]); } } // 配列をループ処理する for(var i = 0; i < more.length; i++) { if(t.name == i) { more[i].className = (more[i].className == 'hide' ? 'show' : 'hide'); } else { more[i].className = 'hide'; } } } /* CSS */ <style> .hide { display: none; } .show { display: block; } <!-- HTML --> <a name="0" onclick="yomu(this);">A</a> <div name="more" class="hide">Aの詳細</div> <a name="1" onclick="yomu(this);">B</a> <div name="more" class="hide">Bの詳細</div> <a name="2" onclick="yomu(this);">C</a> <div name="more" class="hide">Cの詳細</div>
関連するQ&A
- 常にひとつだけ詳細表示する！の回答なのだけれど
<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
- 常にひとつだけ詳細表示する
<a name="0" onclick="yomu(0);">A</a> <div name="more" class="hide">Aの詳細</div> <a name="1" onclick="yomu(1);">B</a> <div name="more" class="hide">Bの詳細</div> <a name="2" onclick="yomu(2);">C</a> <div name="more" class="hide">Cの詳細</div> というようなHTMLがあったとします。 classが「show」で表示「hide」で非表示になります。 詳細記事は最初全てhideです。 yomu(A)を実行するとAの詳細を表示、既に開いていたらAの詳細を非表示。 また、Aの詳細を表示するときA以外が開いていたら非表示に。 ここではABCだけど、実際はもっと数があります。 name="more" の数利用できないかな？ var rflag = new Array(); function red(i){ //非表示のときrflag[i]が0 if(rflag[i] == 1){//iを非表示にする処理 ふにゃらら(iと同じ)番目のmore.className="hide"; rflag[i]=0; } else {//iを表示する処理 ふにゃらら(iと同じ)番目のmore.className="show"; rflag[i]=1; if([i]以外(ふにゃらら番目以外)のrflag == 1) {//iを表示するときi以外に開いていたら閉じる処理} } } のようなイメージなのですが、まだjavascriptを覚え始めて間もないのでぜんぜん方法がわかりません。 変なことしてしまってるかもしれませんが、よろしくお願いします。
- 締切済み
- JavaScript
- DIVの高さをかっこよく変える方法
皆さん、教えてください ボタンを押すとDIVの高さを、動的に大きくするjavascriptを構築しています ですが初めにサイズを指定しないで、なおかつDIVを表示しないページなので、 どうしても初めにDIVを一瞬でも表示しなければなりません それを解決させる方法はありますでしょうか 皆さんのお知恵をお貸しください ソースコード <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>高さを変えるサンプル</title> <script TYPE="text/javascript"> <!-- var max = 0; var hmove = 0; function init(){ max = document.all("height1").offsetHeight document.all("height1").style.display = "none"; } function Height(){ document.all("height1").style.display = "block"; htime = setTimeout("Height()", 30); document.getElementById("height1").style.height = hmove * 3 + "px"; hmove++; if((hmove * 3) >= max){ hmove = 0; clearTimeout(htime); } } //--> </script> </head> <body onload="init()"> <a href='javascript:onClick=Height();'>ここ</A> <div id="height1" style="background:red;overflow:hidden;"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> </div> </body> </html>
- 締切済み
- JavaScript
- z-indexを指定したボックスの下に表示させる
z-indexとjavascriptを組み合わせて下記のようなページを作っています。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ああああ</title> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- function MM_showHideLayers() { //v9.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> <style type="text/css"> div#aaa { z-index: 2; position:absolute; width: 300px; } div#bbb { z-index: 1; position:absolute; width: 300px; } </style> </head> <body> <h1>あああ</h1> <p><a onclick="MM_showHideLayers('aaa','','show','bbb','','hide')">ううう</a> / <a onclick="MM_showHideLayers('aaa','','hide','bbb','','show')">えええ</a></p> <div id="aaa" style="visibility:visible"> <h2>ううう</h2> <p>うううううううう<br /> うううううううう</p> </div> <div id="bbb" style="visibility:hidden"> <h2>えええ</h2> <p>えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ</p> </div> <p>いいいいいいいいい<br /> いいいいいいいいい</p> </body> </html> 切り替わるdivの下に<p>いいいい</p>を表示させたいのですが、後ろに回って表示されません。 これを表示させる方法をご存じでしたら教えてください。
- ベストアンサー
- HTML
- 折りたたみ部分にアンカーでリンクをつけて、リンクでとんだ時、説明部分を開いた状態にしたい
お世話になります。javascriptに関してはまだまだ素人ですが、よろしくおねがいいたします。 http://www.koikikukan.com/archives/cat_149.php のような折りたたみメニューがあるページに、 別ページから、その折りたたみメニュー部分に アンカーで飛ばす方法でリンクをつけようと考えています。 通常、折りたたみメニューはページを開いた時に閉じているのですが、 このリンクで飛んだ時のみ、ぱっと見でどこにとんだか 分かるようにするため、アンカー部分の折りたたみメニューが 開いた状態にしたいです。 しかし、どのように指定すればいいか分かりません。。 リンクにOnClickを付けて試してみたのですが、うまくいきませんでした。 なお、折りたたみ部分は複数あり、リンクでとんだアンカー部分の 説明のみが開くようにしたいです。 なにかよいアドバイスがありましたら、お願いいたします。 ＞別ページリンク指定部分 <a href="/●●/#1">折りたたみ部分へのリンク</a><br> ＞折りたたみメニュー部分 <a name="1"></a> ←※アンカーで飛ぶ <a href="#" onClick="javascript:show_hide('q1'); return false;" onkeypress="javascript:show_hide('q1'); return false;"> 折りたたみタイトル部分(※通常、ここを押すと折りたたみメニューが開く)</a><br> <div id="q1" class="qa"> 折りたたみ部分 </div> ＞折りたたみがあるページでのheadスクリプト部分 (折りたたみが関わっていると思われる部分) <script type="text/javascript"> <!-- function show_hide(tid) { if(navigator.appName.charAt(0)=='M'){ ids = tid.split(','); for (id in ids) { disp = document.all(ids[id]).style.display; if(disp == "none") { document.all(ids[id]).style.display = "block"; } else { document.all(ids[id]).style.display = "none"; } } } } function show(tid) { if(navigator.appName.charAt(0)=='M'){ ids = tid.split(','); for (id in ids) { disp = document.all(ids[id]).style.display; document.all(ids[id]).style.display = "block"; } } } function hide(tid) { if(navigator.appName.charAt(0)=='M'){ ids = tid.split(','); for (id in ids) { disp = document.all(ids[id]).style.display; document.all(ids[id]).style.display = "none"; } } } function prechange(){ if(navigator.appName.charAt(0)=='M'){ show('allpreset'); hide('q1') } loc = top.location.hash if (loc != ''){ location.hash = top.location.hash; } } //--> </script> ※折りたたみページに関しては、前任者が作ったページの為、javascript等私自身しっかり理解できてないところもあります。
- 締切済み
- JavaScript
- onMouseOverの適応範囲
困ってしまい質問させていただきます。 <div> <a href="t1.html" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">show</a> </div> <div id="id1" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';"> <a href="image.gif" onMouseOver="javascript:document.writeln(document.all('id1').style.visibility)">イメージ</a> </div> 以上のhtmlでは、「イメージ」にマウスを持っていくと、hiddenと表示されてしまいます。 一度も<div id="id1"></div>から離れていないため、visibleと表示されると思っているのですが、<div></div>の中であっても、onmouseOutが実行されてしまうのでしょうか？ ブラウザはIEを利用しています。 どうか宜しくお願いします。
- ベストアンサー
- JavaScript
- ３階層メニューについての質問です。
元の文字 →あ →Ａ →Ｂ →い →Ｃ →Ｄ 「元の文字」をクリックすると「あ」「い」が同時に出現。 「あ」をクリックすると「Ａ」「Ｂ」が出現。 となるようにしたいのですが、 <HEAD>～</HEAD>内↓ <SCRIPT language="JavaScript"> <!-- // ツリーメニュー flag = false; function treeMenu(tName) { tMenu = document.all[tName].style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </SCRIPT> <BODY>～</BODY>内↓ <A href="javaScript:treeMenu('treeMenu1')">元の文字</A><br> <DIV id="treeMenu1" style="display:none"> <br> <A style="color :white;" href="javaScript:treeMenu('treeMenu2')"> あ</A><br> <DIV id="treeMenu2" style="display:none"> <A style="color : red;" href="＊＊＊(←URL省略)">Ａ</A><BR> <A style="color : red;" href="＊＊＊">Ｂ</A><BR> <br> <A style="color : white;" href="javaScript:treeMenu('treeMenu3')"> い</A><br> <DIV id="treeMenu3" style="display:none"> <A style="color : red;" href="＊＊＊">Ｃ</A><BR> <A style="color : red;" href="＊＊＊">Ｄ</A><BR> </DIV> </DIV> </DIV> とすると、 「元の文字」をクリックすると「あ」が出現。 「あ」をクリックすると「Ａ」「Ｂ」「い」が出現となります。 上記タグを少し変更して「あ」「い」を 同時に出現させる方法を教えて頂きたいです。 treeMenu○部分の変更で、出来るかと思ったのですが、 上手くいきませんでした。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascriptでツリー表示
javascriptでツリー表示をしたいのですが、全くの素人で、一番やりやすそうなソースを見つけ、『“tree1”を変更して使用』と説明にはあったのですが、実際には『JavaScript:ok('tree1');"』とアドレスに表示されるだけで、目的のツリー表示をしてくれません。 どうしたら、良いでしょうか？ <SCRIPT language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> <B><A HREF="JavaScript:ok('tree1');">■メニュー</A></B><BR> <DIV ID="tree1" style="display:none;"> ┣ あああ<BR> ┣ いいい<BR> ┣ ううう<BR> ┣ えええ<BR> ┗ おおお<BR> </DIV>
- ベストアンサー
- JavaScript
- innerHTMLの初期値
下記のソースがあります。 <SCRIPT TYPE="text/javascript"> <!-- function Change(id){ if(document.all){ document.all.result.innerHTML = document.all(id).innerHTML; }else if(document.getElementById){ document.getElementById('result').innerHTML = document.getElementById(id).innerHTML; } } //--> </SCRIPT> <a href="#" onClick='Change("ih2"); return false'>前</a><br> <a href="#" onClick='Change("ih3"); return false'>次</a><br> <div id="ih2" style="display:none">テキスト1</div> <div id="ih3" style="display:none">テキスト2</div> <br> <span id="result"></span> 前、次のリンクで表示されるテキストが切り替わるようにしているのですが、 クリックする前の段階では何も表示されていない状態です。 そこで、クリックする前でもid="ih2"の「テキスト1」が表示されている状態にしたいのですが、 なかなか出来ません。 functionの前に document.all.result.innerHTML = document.all.ih2.innerHTML; と記述してみましたが駄目でした。 id="ih2"の値を読み込んで表示させたいのですが、 何か良い方法はありませんか。
- ベストアンサー
- JavaScript
- ツリーメニューの作成
ツリーメニューの表示ができません。 記述は以下のとおりです （ヘッダー内） メタタグで標準スクリプト指定 <meta http-equiv="Content-Script-Style" content="text/javascript"> ツリーメニューの記述(某サイトよりコピペ） <script language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> ボディ内 （実際にツリーメニューを表示させる箇所） <A HREF="JavaScript:ok('tree1');"> ■メニュー </A> <div id="tree1" style="display:none;"> ツリー１<br> ツリー２<br> ツリー３<br> </div> ///////////////////////////////////////////////////////////// こんな感じです。 以前別のＨＴＭＬファイルで、ツリーメニューをつくったときには 正常に表示（クリックすると、ずらずらと出てくる）のに、今回同じソース（というのですか？）で記述してみたら、ダメでした。 「このページは表示できません」とかなります。
- 締切済み
- その他（インターネット・Webサービス）
お礼
回答ありがとうございます。まさにこれです！ 配列オブジェクトなんてものが作れるのですね。 .push これは他にもいろいろ使えそう、本当にありがとうございました！