![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
お世話になります。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;
}
No.1ベストアンサー
- 回答日時:
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をふったほうがやりやすいです
この回答への補足
一部質問内容に必要の無い記述がありました、すいません!
html部分のリストが無い状態で、考えたときはどうなりますか?
ページを表示するたびにdivの要素がランダムに表示するように考えているのですが、どうしたらいいでしょうか?
回答ありがとうございます。heikuu2009様から頂いた回答内容は既に、実現が出来ていました。その機能プラスページをリロードする度に内容がランダムに出したいと考え今回、質問させて頂きました。
自分の説明不足もありまして、お手間を取らせました。何とかやりたいことは実現できました。ありがとうございます。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_12.png?8acaa2e)
No.3
- 回答日時:
<!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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
jquery ドロップダウンメニュー...
-
ネストされたチェックボックス...
-
jQueryの要素選択について
-
クリックした<a>タグのみにClas...
-
【jQuery】hoverしたn秒後にイ...
-
jQueryの重複クリック回避につ...
-
大量のチェックボックス状態取...
-
オブジェクトがありませんのエラー
-
jQuery タブメニューへのダイ...
-
javascriptで正規表現の検索が...
-
JavaScriptで、?マークとコロ...
-
フォームのテキストエリアに検...
-
JS <a></a>タグ内のリンク先ア...
-
自閉式ツリーの修正について
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
createElementで作成した要素を...
-
eclipseでcssを使うためには?
-
交互に入れ替わる画像を複数配置
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
javascript テキストエリアを1...
-
jquery ドロップダウンメニュー...
-
jQueryでネスト構造の<li>がク...
-
クリックした<a>タグのみにClas...
-
jQueryの配列の渡し方について
-
for(var i=0;...) の i の値を...
-
Jquery タブで、4つのliのうち...
-
JavaScriptによる疑似プルダウ...
-
jQueryのeqで最後からn番目以降...
-
javascriptでEnterキーをtabキ...
-
【javascript で動的に a タグ...
-
どの<li><a> が押されたか判別...
-
マウスオーバーで開閉できるア...
-
同一ページ内で、任意の文字列...
-
JavaScript インクリメントの書...
-
タブ切り替えの初期表示について
-
jqueryプルダウンメニュー個別着色
-
複数の画像をランダム(シャッ...
おすすめ情報