要素を表示非表示するボタンを作成する方法
- 質問文章から要素を表示非表示するボタンを作成する方法について解説します。
- スクリプトを使用して、特定の要素に表示非表示のボタンを追加することができます。
- ただし、一部のブラウザでは表示非表示のボタンの位置や動作に問題がある場合があります。
- ベストアンサー
思ったように動作しません
試行錯誤してここまで来たのですが力尽きました・・・ memo="target"になっている要素を表示非表示するボタンを 隠す要素の上に表示するスクリプトなのですが、なかなか思うようにいきません。 <body> <div memo="target">TARGET1</div> <div memo="target">TARGET2</div> <div memo="target">TARGET3</div> <script type="text/javascript"> var AllTag = document.getElementsByTagName("*"); function sw(t){ sd = t.nextSibling.nextSibling.style; if(sd.display == "none"){sd.display ="";} else {sd.display ="none";} } function make(){ var link = document.createElement('a'); link.setAttribute("href","#"); link.setAttribute("onclick","sw(this)"); link.setAttribute("style","display:block;"); link.appendChild(document.createTextNode("表示・非表示")); for(i=0;i<AllTag.length;i++){ if(AllTag[i].getAttribute("memo")=="target"){ //link = link.cloneNode(true); AllTag[i].parentNode.insertBefore(link,AllTag[i].previousSibling); alert(AllTag[i].innerText); } } } make(); </script> </body> メモ： １．var AllTag = document.getElementsByTagName("*");をdivに変えて //link = link.cloneNode(true);を有効にすると大分いい感じに動作するのですが、 対象がdivに限定されていないので*を使いたい。 ２．*でlink = link.cloneNode(true);有効にするとダイアログボックスが無限に開くのでご注意 ３．IEだと表示非表示ボタンの位置と、消える場所がうまくいかない こんな感じなのですが、よろしくお願いします・・・
- idhokanohi
- お礼率58% (48/82)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと、classでのしていは、まずいかぁ～。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <div class="abc tgt">TARGET1</div> <div class="tgt def">TARGET2</div> <div class="ghi tgt jkl">TARGET3</div> <script type="text/javascript"> var reg = new RegExp('\\b' + 'tgt' + '\\b'); function make () { var doc = document; var tmp = doc.getElementsByTagName("*"); var cnt, obj, tgt =[]; var p = doc.createElement('p'); var a = doc.createElement('a'); a.href = '#'; a.style.display = 'block'; a.name = 'tgt'; a.appendChild(doc.createTextNode("表示・非表示")); p.appendChild(a); for(cnt = 0; obj = tmp[cnt++]; ) reg.test(obj.className) && tgt.push(obj); for(cnt = 0; obj = tgt[cnt++]; ) obj.parentNode.insertBefore(p.cloneNode( true ), obj); } //@cc_on document./*@if (@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'click', function (evt) { var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; if ('A' === e.nodeName && 'tgt' === e.name) with(e.parentNode.nextSibling.style) display = display == 'none' ? 'block': 'none'; }, false); make(); </script> これとは、まったくちがうことなのだけど。 教えてgooで、みると、「このカテゴリで人気のQ&A」のいちらんに 「１つのformで複数のactionを実行できますか？」が、とっぷで くいこんでくるのはなぜ？とおもうのは、ばぶぅ～だけ？ ということを、かいとうするたびに、つけてみようとおもう。^^;
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
えぇ～と。 AllTag[]は、いきものだじょ。ついかするとふえるから、ずれるじょ。 var tmp = link.cloneNode(true); みたいにしないと、linkがふえつづけるじょ！ ついかする<a>たぐようそは、いんらいんようそだから、ぶろっくようそで かこまないとだめだじょ！ HTML5なら、いいのかもしれないけど（くわしくはふめい） <div memo="target">みたいにかってにmemoなんて つかっちゃだめかもよ？
関連するQ&A
- 画面が遷移したみたいになってしまいます。
画面ロード後にjavascriptで動的にまたjavascriptタグを表示しています。 以下のjavascriptを組み込んでみたところ、取得したjavascriptを表示したときに画面遷移したみたいになってしまいました。 どうすればきちんと表示されるようになるでしょうか。 <div id="position"></div> <script language="javascript">// <!-- var timer = setInterval("Timer()", 1000); function Timer() { var position = document.getElementById('position'); var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', 'http://hogehoge/getjs'); position.appendChild(script); clearInterval(timer); } // --></script> http://hogehoge/getjsからはコンテンツの部品を表示するjavascriptが入っています。
- 締切済み
- JavaScript
- ラジオボタンを他の物に変えても動作するようにしたい
ラジオボタンでチェックされた項目に合わせて用意されている文章が表示されるものです。 そのラジオボタンを<button>や<img>に変えることは可能なのでしょうか。 <!--メニュー--> <div> <form method="get" name="updateHTML"> <input type="radio" name="imageSize" value="00" onclick="return toggle();" checked /> No.01<br /> <input type="radio" name="imageSize" value="01" onclick="return toggle();" /> No.02<br /> <input type="radio" name="imageSize" value="02" onclick="return toggle();" /> No.03<br /> </form> </div> <!--表示文--> <div id="html-00" style="display:inline;"> テキスト０１ </div> <div id="html-01" style="display:none;"> テキスト０２ </div> <div id="html-02" style="display:none;"> テキスト０３ </div> <!--スクリプト--> <script type="text/javascript"> var options = new Array('00','01','02'); function toggle() { var form = document.forms['updateHTML']; var size = _getOption( form.imageSize ); var chosen = size; for ( var i = 0; i < options.length; i++ ) { var htmlId = 'html-'+ options[i]; var html = document.getElementById( htmlId ); if ( (html == null) ) { continue; } if ( options[i] == chosen ) { html.style.display = 'inline'; } else { html.style.display = 'none'; } } return true; } function _getOption(radioObj) { for ( counter = 0; counter < radioObj.length; counter++) { if ( radioObj[counter].checked ) val = radioObj[counter].value; } radioObj.value = val; return val; } </script>
- ベストアンサー
- JavaScript
- jsで次のELEMENT_NODEを見つけたい
しごく単純な質問かもしれませんが、検索エンジン等で捜しても見つからなかったのでご教授頂けないでしょうか？（検索の仕方が悪いかもしれません。。。） たとえば以下の簡単なjavascriptがあるとします。 <body> <div id="test1">hogehogehoge</div> <div>fugafugafuga</div> <script type="text/javascript"> var obj = document.getElementById('test1'); console.log(obj.nextSibling); </script> </body> この場合、nextSiblingで取得した値は次のテキストノードになってしまいます。 決めうちであれば以下のようにやってみたらうまくいきましたが、 なんだかなぁ～って感じです。 <script type="text/javascript"> var obj = document.getElementById('test1'); console.log(obj.nextSibling.nextSibling); </script> jQueryで言うところのsiblings()のような使い方、またはソースをご教授いただけないでしょうか？（できれば説明文も添えて頂ければ助かります） 一応jQueryのソースを読もうとしましたが、まことに恥ずかしいのですが力不足でまるで読むことができませんでした。 以上よろしくお願いいたします。
- ベストアンサー
- JavaScript
- Google AJAX Feed APIキー
http://okwave.jp/qa/q7289256.html ↑こちらの記事を参考にしてサイトのTOPページにWPのタイトル表示を試みました。 表示はされるものの、そのタイトルを更にリンク（各記事にとぶ）にしたいのですが、 以下のソースのどこをいじればリンクになるのか教えて下さい。 ------------------------------------------------------- ■タイトル表示させたいページの<head>内に以下入れる。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("★RSS★"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> ■HTMLのタイトル表示させたい部分に以下入れる。 <div id="feed"></div> ------------------------------------------------------------------------------- よろしくお願い致します。
- 締切済み
- JavaScript
- 1ページ内で複数のwindow.onload = functionの動作
Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>
- ベストアンサー
- JavaScript
- スクリプトで<div id="links">
下記スクリプトで<div id="links"></div>のところを 開いた瞬間 <ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul> に変換したいのですがうまくいきません どこをどのように変更すれば変換されるのでしょうか 【スクリプト】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> var URL = new Array("http://foo.com/","http://bar.co.jp/"); var TITLE = new Array("foo","bar"); // 表示用コンテナ var container = document.getElementById('links'); // リセット container.innerHTML=''; var ul=document.createElement('ul'); container.appendChild(ul); for(var i=0;i<URL.length;i++){ var li=document.createElement('li'); var a=document.createElement('a'); // 'href'属性の設定 a.setAttribute('href',URL[i]); // ラベル a.appendChild(document.createTextNode(TITLE[i])); li.appendChild(a); ul.appendChild(li); } </script> </head> <body> <div id="links"></div> </body> </html>
- 締切済み
- AJAX
- onclickを使わずにイベント処理をする方法について。
onclickを使わずにイベント処理をする方法について。 【<h1>をクリックすると同じ<div>を親に持つ<p>が表示/非表示】 されるようにしたいのですが、IEで動作せず、困っています。 下記は現在のコードです。 -------------------------------------------------------------------------- var divs = document.getElementsByTagName('div'); var listener = function(ev){ if(/(?:^|\s)text(?:$|\s)/.test(ev.target.className)){ var next = ev.target.nextSibling.nextSibling; if(next.style.display != "none"){ next.style.display = "none"; }else{ next.style.removeProperty("display"); } } }; if (document.addEventListener) { document.addEventListener('click', listener, false);// IE以外 } else { document.attachEvent("onclick", listener);// IE } -------------------------------------------------------------------------- <div> <h1 class="text">見出し</h1> <p>本文</p> </div> <div> <h1 class="text">見出し</h1> <p>本文</p> </div> <div> <h1 class="text">見出し</h1> <p>本文</p> </div> -------------------------------------------------------------------------- ev.target.classNameあたりが怪しく… window.event.srcElement.classNameに変更してみましたが動作しませんでした。 html側の制約があり、出来れば上記のようなclassのみのhtmlで、 更にわがままを言うと <div class="text"> <h1>見出し</h1> <p>本文</p> </div> のようにdivにclassを振った形で実現したいです。 なお、現在のコードは複数のサンプルコードを参考に試行錯誤したものですので 不要なコードが混ざっているかもしれません。 動作確認環境はIE7、IE8、Firefox、Safari（Windows）です。 納期が迫り大変困っています。アドバイスを頂けますと嬉しいです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- onmouseoverの表示切り替えが上手くいかない
onmouseoverを使って、隠していた＜DIV＞を表示させたいと思っています。 ＜li＞にマウスが重なったら、その直前に表示させていた＜DIV＞を隠した上で、idに対応する＜DIV＞を表示させ、さらに＜H2＞に重なった場合にも隠す、という流れの処理を考えています。 firefoxのエラーコンソールでは「descriptionw0 is not defined」となって、動作しません。IEでもエラーになります。 どこかでミスをしてはずなのですが、どうやっても上手くできないので、知恵を貸していただけないでしょうか。よろしくお願いします。 -------------------------- javascript --------------------------- <script language="javascript"> <!-- var target = null; function mOver(t){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } document.getElementByID(t).style.display = 'block'; target = t; } function mOut(){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } target=null; } //--> </script> ---------------------------- HTML部分 ---------------------------- <div class="part"> <h2 class="title" onMouseover="mOut()">＊＊＊</h2> <ul class="article"> <li onMouseover="mOver(descriptionw0)"><a href="#">ＡＡＡ</a></li> <li onMouseover="mOver(descriptionw1)"><a href="#">ＢＢＢ</a></li> </ul> <div class="description" id="descriptionw0" style="display:none;">ａａａ</div> <div class="description" id="descriptionw1" style="display:none;">ｂｂｂ</div> </div>
- ベストアンサー
- JavaScript
- 指定位置に要素を追加する
<script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありません できれば<div>で<a>を囲うのをやめたいのです。 ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも？いいのですが、何かいいやり方ありませんか？
- ベストアンサー
- JavaScript
- Google AJAX Feed API
Google AJAX Feed APIでRSSを読み込んでタイトルなどの文字のみの表示をすることはできたのですが、（下の記述でやっています。） 画像が投稿されているブログ記事の画像を読み込み、表示させることはできるのでしょうか？ その場合の方法はどのように、すればできるのでしょうか？ お手数をおかけしますが、よろしくお願い致します。 <script type="text/javascript" src="http://www.google.com/jsapi?key="></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://"); <!--表示したいエントリー数--> feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a");a.href = entry.link; <!--別窓で表示しない場合は削除してください--> a.target = "_blank" ; a.appendChild(document.createTextNode(entry.title)); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script>
- ベストアンサー
- JavaScript
補足
Oh、自己解決してからみてしまいました、私はID自動で振付ける方法で。 できれば使いたくなかったんだけど・・・ Siblingの挙動がIEと他で違うかったんですねぃ。 IEが.nextSiblingの所を他は.nextSibling.nextSiblingっていう風にニ連続にしないといけないみたいです。.previousSiblingも同じくです。 そしてそして、回答ありがとうございました～！