- 締切済み
ブログで表示・非表示をコントロール
ブログのプライマリカラムでの表示・非表示についての質問です。 JavaScriptを使って特定のエントリーから<div class="example">......</div>を非表示にしたいので、それら特定のエントリーの末尾に以下のようなコードを貼付けました。 <script type="text/javascript"> var abc = document.getElementById('example'); abc.parentNode.removeChild(abc); </script>（外部ファイル使用） しかし、期待したとおり非表示になりませんでした。試しにテンプレートに貼付けている<div class="example">......</div>の位置をテンプレート上部に移動させると非表示になります。このため、おそらくhtml上で<div>......</div>が<script>......</script>より先にこないと非表示にならないと思うのですが、<div>......</div>はエントリーの末尾に置きたいので位置を変えたくありません。 この問題を解決する方法はないでしょうか？ JavaScriptについては、数日前からネットで調べ始めたばかりのもので全く知識がありません。 どうか、宜しくお願いします。
- fenton6
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- taka451213
- ベストアンサー率47% (436/922)
こんにちは。 あぁ、違う・・・。 最初から非表示にしたければ、 <div>...</div> を <div style="display:none;">...</div> （CSSでもいいけど・・・） でいいのかな？ 非表示にしたいだけとは思えんが・・・。 removeChild DOMの子ノードを削除してますが、onloadで削除するぐらいなら、最初から書かなければいいと思うが・・・？ やりたい事が見えないので、方向がずれているような気が・・・。
- taka451213
- ベストアンサー率47% (436/922)
こんばんは。 <body onload="やりたい事・・・">
関連するQ&A
- hiddenを使って項目の表示、非表示を切り替えたいのですが
素人ですので、質問がクリアでないかもしれませんが宜しく御願い致します。 <---A---><--B--><-C-><--D-->といった形で表示されているものを、例えばBとCを非表示にして <---A---><--D-->のように表示する又はAとCを非表示にして <--B--><--D-->といった形で表示出来ないでしょうか <div class="A">A <div class="B">B <div class="c">C <div class="d">D 以下やってみたのですが <script type="text/javascript"> function hidden_Disp() { document.getElementById("B").style.visibility = "hidden"; document.getElementById("C").style.visibility = "hidden"; } </script> でやってみましたが駄目です。 何卒宜しく御願い致します。
- ベストアンサー
- JavaScript
- innerHTMLで、関数での記載内容を希望のエリアに表示したい。
お世話になります。 下記のように行うと、 「実際は、いろいろと表示したい」 が、 「aaaaaaaaaaaaaaaaaa」 の下に表示されてしまいます。 また、 <div id="DspArea"> の位置には、undefined と、表示されてしまいます。 document.getElementById("DspArea").innerHTML="tst"; とすれば、 <div id="DspArea"> の位置に正確に表示されます。 innerHTMLで、関数で記載したタグを含む文字列を表示させるには何か気をつけなければならないことがあるのでしょうか。 よろしくご教示お願いします。 <script type="text/javascript"><!-- function dspTst(){ document.write('実際は、いろいろと表示したい'); } // --> </script> <div> <div id="DspArea"> </div> <div> aaaaaaaaaaaaaaaaaaaa </div> </div> <script type="text/javascript"><!-- document.getElementById("DspArea").innerHTML=dspTst(); // --> </script>
- ベストアンサー
- JavaScript
- 表示中のタブに色を付けたい
タブ1111～5555は青色表示されていますが 選択中には常に赤色表示させておきたいのですがどうすれば良いのでしょうか。 ご教授ください <html> <head> <script type="text/javascript"> function ChangeTab(tabname) { // 全部消す document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; document.getElementById('tab5').style.display = 'none'; // 指定箇所のみ表示 document.getElementById(tabname).style.display = 'block'; } // --></script> </head> <body> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">1111</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">2222</a> <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">3333</a> <a href="#tab4" class="tab4" onclick="ChangeTab('tab4'); return false;">4444</a> <a href="#tab5" class="tab5" onclick="ChangeTab('tab5'); return false;">5555</a> <div id="tab1" class="tab"> <div class="information-newwarp">aaaa</div> </div> <div id="tab2" class="tab"> <div class="information-newwarp">bbbb</div> </div> <div id="tab3" class="tab"> <div class="information-newwarp">cccc</div> </div> <div id="tab4" class="tab"> <div class="information-newwarp">dddd</div> </div> <div id="tab5" class="tab"> <div class="information-newwarp">eeee</div> </div> <script type="text/javascript"><!-- // デフォルトのタブを選択 ChangeTab('tab1'); // --></script><!--■タブページデフォルト設定js--> </body> </html>
- ベストアンサー
- JavaScript
- javascriptでボックスの表示非表示
javascriptでボックスにマウスオーバーすると、同じ位置に別のボックスを表示させたいと考えています。 以下のようにしてみましたが、ie9ではできたのですが、 ie6、ie7、ie8ではdiv1とdiv2が横に並んでしまいました。 何か解決方法があれば教えてください。 よろしくお願いいたします。 <script type="text/javascript"> window.onload = function() { div1 = document.getElementById("div1"); div2 = document.getElementById("div2"); div1.onmouseover = function() { div1.style.display = "none"; div2.style.display = "block"; }; div2.onmouseout = function() { div1.style.display = "block"; div2.style.display = "none"; }; div1.style.display = "block"; div2.style.display = "none"; }; </script> <div id="div1" class="box01"> <div id="pic"><img src="image01.gif"></div> <div id="txt">てきすとてきすと</div> </div> <div id="div2" class="box02"> <div id="pic"><img src="image02.gif"></div> <div id="txt">てきすとてきすと</div> </div>
- ベストアンサー
- JavaScript
- 属性の削除について
属性の削除を行いたいのですが、親オブジェクトの記述が解りません。 詳しい方教えてください。 <script type="text/javascript"> <!-- 親オブジェクト = document.getElementByID("ID名"); 削除するオブジェクト = document.getElementByID("ID名"); 親オブジェクト.removeChild(削除するオブジェクト); // --> </script> HTML <div class="image"> <a href="○○○.gif" title="" rel="△△"><img src="○○○.gif"></a> </div>
- 締切済み
- JavaScript
- JUGEMのブログデザインについて
JUGEMという所でブログをやっていて、cssやhtml自由に変えることが出来るんですが、添付した画像のようにコンテンツが重複してしまいます（画像小さくてすみません）。 cssの方を変えたとしても同じような現象になるので、htmlタグのどこかが原因だろうと思い色々いじっているんですが改善しません。 記述は以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>{site_title}</title> <link rel="stylesheet" href="{site_css}" type="text/css" /> <link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" /> <link rel="alternate" type="application/atom+xml" href="{site_atom}" /> <link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" /> <script src="http://imaging.jugem.jp/template/analogue/menu.js" type="text/javascript"></script> <script type="text/javascript" src="http://imaging.jugem.jp/template/js/cookie.js"></script> </head> <body onload="javascript:initval();"> <div id="layout"> <div id="header"> <h1>{blog_name}</h1> <div class="about"> {blog_description} </div> </div> <div id="menu"> </div> <div id="wrapper"> <div id="mein"> <div class="entry_title"><h2>{entry_title}</h2></div> <div class="entry_date">{entry_date}{entry_time}</div> <div class="entry">{entry_description}<br><br><br></div> </div> {ad} </div> </div> </body> </html> ヘッダー部分とメインとなる部分はちゃんと表示されているのですが、それの間にもう一つ同じものが表示されてしまうんです。 どんな所で探しても同じような質問がなかったので、こちらで質問させて頂きました。 分かる方いらっしゃいましたら回答お願いします。
- ベストアンサー
- ブログ
- 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
- クリックする度に表示/非表示が切り替わるスクリプト
クリックする度に表示/非表示が切り替わるスクリプト Content1をクリックするとSubContentsの表示/非表示が切り替わるスクリプトを組みたいのですが、 下記スクリプトのjavascript内で表示/非表示の実現方法がよくわかりません。 調べるとStyleのVisibilityという要素(?)を指定することで表示/非表示が切り替えられる可能なのは分かったのですが、具体的にはどんなプログラムを組めばいいのか分かりません。 どなたかご教授お願いします。 <html> <head> <title>Template</title> <style type="text/css"> span.content{ background-color: #FFCC66; width: 100; height: 20; } div.subcontent { position: absolute; top: 40px; left: 40px;} </style> <script language="javascript"> function cont_pop(){ //ここをどうすれば良いでしょうか？ } </script> </head> <body bgcolor=#EEEEEE> <span id="cont1" class="content" onClick="cont_pop()">Content1</span><BR> ↓これを表示/非表示させたい <div class="subcontent" id="scon1"> SubContents </div> </body> </html>
- ベストアンサー
- JavaScript
- JavascriptでValueを変えるには
再び質問致します。getElementByIdを前回の質問から学ばせて頂きました。やりたいことはTagの値の変更です。 以下のスクリプトでgetElementByIdはアラートが出ますので存在し値もあっている訳ですが代入が出来ません。ReadOnlyをはずしても駄目です。何かが間違っていると思います。宜しく御願い致します。 <html> <head> <title>エレメントの表示</title> </head> <script type="text/javascript"> function Disp_change() {function SchDefult_Disp_change() { alert("in1"); if (document.getElementById("SchDefult").value == 'Only For' ) { alert( "必須入力です " )}; SchDefult.value = "in1"; SchDefult = "in1"; } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2 " type="text" id="SchDefult" name="parent" value="Only For"> </div> <script type="text/javascript"> Disp_change(); }; </script>
- ベストアンサー
- Java
- javascriptでの表示について
他のページの<div><ul></ul></div>の間の文字を拾ってくるjavascriptがあります。 【ベースページ】 <script type="text/javascript"> $(function(){ $("#test").load("https://hoge.ne.jp/read.php#test ul", function(data) { if(data == null){ $("#test").append("読込みに失敗しました"); } }); }); </script> 【読み込みページ】 read.php <div id="test"><ul> テストです </ul></div> 【ベースページ】に <div id="test"></div> と記載すると、読み込みページの<div><ul></ul></div>の間の文字「テストです」を拾ってきます。 これをjavascript内で表示したいと思います。 <script> document.write( document.getElementById('read77') ); </script> では表示されません。 どのように書けば表示されますでしょうか?
- 締切済み
- JavaScript
お礼
回答ありがとうございます。 教えて頂いたとおり、テンプレートの<body>を<body onload="examplend">と書き換え、さらにJavaScriptの外部ファイルのコードをfunction examplend() {}で包むことで、エントリー下部の<div>......</div>がついに表示されなくなりました！ これで当初、もくろんでいた事がほぼ達成できたのですが、一つだけ気になることがあります。それはページを開けた時、たぶん、0.2秒間ぐらいでしょうか、<div>......</div>がほんの一瞬ですが表示されてしまうことです。できれば、これも消したいのですが無理でしょうか？ もしかして、各特定エントリー記事の末尾にJavaScriptを書き込むのではなく、テンプレートに貼付けた<div>......</div>に、例えばURL1, URL2, URL3......の場合だけ、あるいはカテゴリ=Aの場合だけ非表示といった条件付をすれば、完全な非表示（つまり、一瞬の表示もない）が達成できるのかなと思ったのですが、そういったことは可能でしょうか？ さらなる質問で恐縮ですが、宜しく御願いします。