- ベストアンサー
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; }
- wakagi
- お礼率70% (21/30)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
function test(){ var i, a, divLen = 0; var t = document.getElementById('link'); for(i = 0; ( a = t.getElementsByTagName('div')[i]); i ++,divLen ++){ a.style.cssText = 'display:none;margin-bottom:10px;'; } t.getElementsByTagName('div')[Math.floor(Math.random()*divLen)].style.display = 'block'; } function showChanger(n){ var i, a; for(i = 0; (a = document.getElementById('link').getElementsByTagName('div')[i]); i ++){ a.style.display = (i+1 == n) ? 'block' : 'none'; } } <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="javascript:void(0)" onclick="showChanger(1);return false;">リンク1</a></li> <li><a href="javascript:void(0)" onclick="showChanger(2);return false;">リンク2</a></li> <li><a href="javascript:void(0)" onclick="showChanger(3);return false;">リンク3</a></li> </ul> 数が増えるんだったらこう書いたほうがいいのかな？ ・CLASSじゃなくてIDをふったほうがやりやすいです
その他の回答 (2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Random display</title> <div id="p"> <div class="rand a">123</div> <div class="rand b">456</div> <div class="rand c">789</div> <div class="rand d">012</div> <div class="e rand">345<div>これがまずい</div></div> </div> <script type="text/javascript"> //全角空白は半角空白かタブに変換のこと //@cc_on /*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function () { var _TARGET_DIV = 'p'; var _TARGET_CSS = 'rand'; var cnt = 0; var c = document.getElementById(_TARGET_DIV).firstChild; var r = new RegExp( '\\b' + _TARGET_CSS + '\\b'); var objs = []; while (c) { if (c.tagName == 'DIV' && c.className.match(r)) c.style.display = 'none'; objs.push(c); cnt++; c = c.nextSibling; } objs[Math.random()*cnt|0].style.display = 'block'; }, false); </script>
お礼
回答ありがとうございます。参考にさせて頂きます。
- heikuu2009
- ベストアンサー率33% (5/15)
先ほどの回答について動作確認はされていないのでしょうか？ まずは、あなたが要求する動作が実現されているか確かめてください。
関連するQ&A
- jqueryで特定の要素をdivで囲う
jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- onMouseoutの有効な範囲
初期状態：aaaという文字のみ表示 動作：aaaをクリックするとその下にbbb,cccというリンクが現れ、これら（aaa,bbb,cccの領域）からマウスアウトしたら、bbb,cccが消える というものを作る為に、以下のコードを書いてみました。 <div onMouseout="this.childNodes[1].style.display='none'"><p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p><ul style="display:none;"><li><a href="#">bbb</a></li><li><a href="#">ccc</a></li></ul></div> 「ブラウザによりノードのカウント方法が異なり挙動が変わる」のを防ぐために改行をなくしましたが、見やすくするとこうなります↓ <div onMouseout="this.childNodes[1].style.display='none'"> <p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p> <ul style="display:none;"> <li><a href="#">bbb</a></li> <li><a href="#">ccc</a></li> </ul> </div> これを実際に試してみると、aaaを押してリンクbbb,cccが出てきたのは良いものの、 リンクをクリックするためにマウスをbbb,cccへ移動しようとすると、 aaaから離れた時点でbbb,cccが消えてしまいます。 「div全体に」”マウスアウトしたらbbb,cccが消える”というつもりで上記のソースを書いたのですが、 divのonMouseoutはpからマウスアウトしても働いてしまうのでしょうか。 どのように修正したらよいか試行錯誤中です。 解決策があれば、どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- 展開メニューの修正
展開メニューの修正 をしています。 menu.js------------------------ function block(id){ if(document.getElementById){ if(document.getElementById(id).style.display == "none"){ document.getElementById(id).style.display = "block"; }else if(document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; } } } html--------------------------- <div onMouseOut="block('block1')"> <div onMouseOver="block('block1')"><a href="***">コンテンツ名</a></div> <div id="block1" style="display: none;"> <ul> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul></div></div> 「コンテンツ名」に触った時展開して、サブコンテンツor「コンテンツ名」から離れた時にサブコンテンツを閉じる、という挙動まではできているのですが、 サブコンテンツのメニュー間を移動する際にちらつくというかいちいち閉じてしまうのを直したいのですが、どうしたらいいのでしょうか？ よろしく御教授ください。
- ベストアンサー
- JavaScript
- 折りたたみタグ 他を閉じる（非表示にする）
折りたたみリンクが複数ある場合で、 一つ開くと他の開いた折りたたみリンクが閉じる（常に表示されるのは一つだけ）スクリプトを探しています。 以下のタグを使わせて頂いてます。 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 こちらで見つけたので、少しの修正でなんとかできないかと上記の使っている ものを少しずついじって試してみたのですが、動かなくなるだけでしたので、 丸々スクリプトを取り替えてみたのですが、何が悪かったのか動きませんでした…。 既にたくさん使用しているので、できれば丸々とりかえるのではなく、 簡単な修正で変更できたらいいなと思っております…。 ご助力よろしくお願い致します。
- ベストアンサー
- JavaScript
- divの間にすき間ができる
入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか？ <div style="clear:both"></div>を入れてみては？と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>
- 締切済み
- レンタルサーバ・ASP
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<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に追加機能を
クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい よろしくお願い致します。 下記のようなコードで、HTML部分の「リンクテキスト」をクリックすると「クリックで開く内容」が表示され、かつ、リンクテキスト（id="link-1"）の文字色が変わるJavascriptを使用しています。 ■Javascript部分 function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; document.getElementById('link-1').style.color = "#cc0000"; } else { document.getElementById(targetID).style.display = "none"; document.getElementById('link-1').style.color = "#000000"; } } } ■HTML部分 <a href="#" id="link-1" onClick="showHide('hoge1');return false;">リンクテキスト</a> <div id="hoge1" style="display:none;">クリックで開く内容</div> リンクテキストの文字色が変わる部分は見よう見まねで追加したのですが、文字色が変わる部分を、link-2、link-3・・というように同ページに複数配置したい場合、どのようなコードに変更すればよいのでしょうか。 できればid="link-1"などという記述はせずに、showHide('hoge1');をshowHide('hoge2');に変えて、<div id="hoge1" style="display:none;">を<div id="hogge2" style="display:none;">に変えるだけで、文字色も変わるようにできれば一番良いのですが、そのような方法はあるのでしょうか？ 分かりにくい箇所は補足説明致しますので、どうぞご教授下さいますようお願い致します。
- ベストアンサー
- JavaScript
- ナビゲーションバーの背景画像が表示されません（CSS）
私は今ホームページを作っておりまして、 先日ウェブデザインについての本を買ったのですがそこに書かれていた スタイルシートの記述例（ナビゲーションバーです）をまねて 自分で記述してみたのですが思うように表示できません。 どなたか教えてください。 ◆問題の部分です◆ スタイルシート div#navi{ width:900px; margin-bottom:7px; padding-bottom:7px;} ul ,li{ margin:0; padding:0; } ul#navbar{ list-style-type:none; width:900px; float:right; } ul#navbar li, ul#navbar li a{ float:left; text-indent:-9999px; display:block; width:100px; height:25px;} ul#navbar li#link a{ background:url(image/menu-kyousitu.png) no-repeat left top; float:right;} 以下同じ様にメニューが続き ul#navber li#sample1{background:url(image/menu-a5.png) no-repeat left top; float:right;} ↑最後のsampleの部分はリンクを張らないようにしたいのでこのように記述したところ、この部分には背景画像が表示されません。 HTML <div id="navi"> <ul id="navbar"> <li id="link"><a href="＊＊">リンク集</a></li> <li id="sample1">sample</li> </div> 見苦しい分で申し訳ありませんが、どなたかよろしくお願いします。
- ベストアンサー
- CSS
- 別ページのインラインフレームに表示させる方法
別ページのインラインフレームに表示させる方法 こんにちは。いつもお世話になっております。 数日前に自閉式ツリーについて質問させていただきました。 ありがとうございました。 http://okwave.jp/qa/q5526156.html --------------------------------------------------------------- <script type="text/javascript"> <!-- function tree2(menu_class,menu_id) { var div=document.getElementById(menu_id); if (div.style.display == "block") div.style.display="none"; else { var sib=div.parentNode.childNodes; for (var i=0; i < sib.length; i++) if (sib[i].className == menu_class) sib[i].style.display="none"; div.style.display="block"; } } // --></script> <style type="text/css"> <!-- .tree { display:none; } --></style> <p><a href="javascript:tree2('tree','menu1');" title="展開">展開</a></p> <div class="tree" id="menu1"> <ul> <li><a href="a.html" title="あ" target="frame">あ</a></li> <li><a href="aa.html" title="ああ" target="frame">ああ</a></li> </ul> </div> --------------------------------------------------------------- 【参考ページ】http://amenti.usamimi.info/treemenu2.html というふうに作っているのですが、たとえばAページの上記ツリーをクリックした際に内容がBﾍﾟｰｼﾞのインラインフレームframeに表示され、かつツリーが展開しているというような動作は可能でしょうか。 いろいろと高望みをしているとは思いますが、できればお力をお貸しください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- CSSでa要素全体をリンク出来るようにしたいのですが
CSSでa要素全体をリンク出来るようにしたいのですが、 Firefoxなら出来るもののIE8、Sleipnirでは文字の上しかリンクされません。（文字の上にマウスを当てると全体の色は変わったりするのですが。） 5時間くらい迷ってるので少しでも分かる方、いらっしゃいましたら 何でもお願いします。。 色々検索してソースに付け加えたりしてるので適切ではないものが多々あるかと思いますが、とにかくCSSソースをそのまま載せます。 div#link ul { list-style: none outside; overflow : hidden; padding: 0; margin: 0; letter-spacing:7px; font-weight: bold; } div#link li a { display: block; width: 100%; overflow : hidden; padding: 5px; padding-left: 20px; padding-right: 0px; font-size: 14px; color: #0000ff; } div#link li a:hover { display: block; overflow : hidden; background-color: #ffff33; color: #000; } HTMLは <div id="link"> <ul> <li><a href=".html">あいうえお</a></li></ul></div>です。 なにとぞ宜しくお願い致します。
- ベストアンサー
- HTML
お礼
回答ありがとうございます。heikuu2009様から頂いた回答内容は既に、実現が出来ていました。その機能プラスページをリロードする度に内容がランダムに出したいと考え今回、質問させて頂きました。 自分の説明不足もありまして、お手間を取らせました。何とかやりたいことは実現できました。ありがとうございます。
補足
一部質問内容に必要の無い記述がありました、すいません！ html部分のリストが無い状態で、考えたときはどうなりますか？ ページを表示するたびにdivの要素がランダムに表示するように考えているのですが、どうしたらいいでしょうか？