クリックする度に表示/非表示が切り替わるスクリプト

前へ 次へ
このQ&Aのポイント
  • クリックするとContent1の表示/非表示が切り替わるスクリプトを組みたい
  • javascript内で要素の表示/非表示を切り替える方法がわからない
  • StyleのVisibilityを使用して要素を表示/非表示にすることができる
回答を見る
  • ベストアンサー

クリックする度に表示/非表示が切り替わるスクリプト

クリックする度に表示/非表示が切り替わるスクリプト 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>

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.6

#3です。 うっかりフラグなんてつくっちゃったけど、不要でしたね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> div { width:150px; float:left; } hr { clear:left; } </style> </head> <body> <div id="cont1">Content1</div> <div id="cont2">Content2</div> <hr> <div id="scon1">SubContents1</div> <div id="scon2">SubContents2</div> <script type="text/javascript"> <!-- (function() { function toggleSet(id1, id2) { var el = document.getElementById(id1); try { el.addEventListener('click', toggle(id2), false); } catch(e) { el.attachEvent('onclick', toggle(id2) ); } } function toggle(id2) { return function() { var s = document.getElementById(id2).style; s.visibility = s.visibility=='hidden'?'visible':'hidden'; } } toggleSet('cont1', 'scon1'); toggleSet('cont2', 'scon2'); })(); //--> </script> </body> </html> 以下は関係ありません。 ---------------------------------------------- 回答は簡単なほうがいいと思っています。（＝質問者がわかりやすい） まぁ、あまり簡潔にすぎると、まったく理解されない場合もあるけど… document.getElementById('cont1').onclick = function() { var s = document.getElementById('scon1').style; s.display = s.display=='none'?'block':'none'; } ですんでしまうものが、長く複雑に… それに匿名関数ではないほうが、わかりやすいかも。 ということで、なるべく努力はしますし、まとまりのある機能を一般化したようなものの場合はしているつもり。 でも、ごく簡単なものや考え方のみの場合は必要ないように感じています。（自分のお勉強とは別にして） なので、いつもというわけにはいかないかも。

humi_ak
質問者

お礼

レベルの低い私に合わせてくださってありがとうございます(>_<) この私も上のようなコードを作っていました(エラー出て悩んでましたけど^^;) 一般化すれば使いまわしも利きますし便利なんですけど、その分コードも複雑になりますよね。 でも今回のお二人の回答に載っていたコードを見てJavaScriptの書き方を割と理解できた気がします。 条件文の省略形然り、関数の使い方然り、勉強になりました。 大変感謝しています。 ありがとうございました。

その他の回答 (6)

回答No.7

＞f&&func.call(that,flag);ってなにしてるの!? if( f == true ) { func( flag );// 引数funcが関数ならば、実行する } //と、似たり寄ったり。 //thatは、コールバックを利用したい時のため var flag = true; if( flag == true ) { test(); } は、 flag && test(); とも書けるよ if( flag != true ) { test(); } なら flag || test(); とも書けるよ ほそくがないことを、だしにしてつっぱしってしまった。もうしわけない

humi_ak
質問者

お礼

わざわざ解説ありがとうございます。 そう、その書き方も今回babu_babooさんのコードを見て知りました(@_@;) やはり質問する側にも最低限の知識は必要ですね・・・orz babu_babooさんのコードは難しいですが、調べて理解できるとタメになるのでありがたいです(^_^) そういえば先ほどのコード、 　var f = 'function' === typeof func; 　f && func.call( that, flag ); この２つの謎が解けたらなんとか理解できました。 たった8行に半日使ってしまった・・・笑 大変勉強になりました！ ありがとうございますm(_ _)m

回答No.5

fujillinさんへ。ぷちおねがい。 がっつりコードをかいてくださってありがとうございます。 とてもよいしげきになります。 もしよければ、onloadとかonclickとかではなく、ちがうものにしませんか？ それらは、かんたんにうわがきされると、きのうしなくなる。 へなちょこなコードしかかけませんが、じょうぶなコード、へんこうにつよいやつを おたがいにせっさたくまして、かきませんか？ あぁ～これだけだと、さくじょたいしょうだな。 なので、ほそく。 var cont_pop0 = toggleSwitch( true, dispBlock( 'scon1' ) ); var cont_pop1 = toggleSwitch( false, dispBlock( 'scon2' ) ); のようにして、それぞれをよびだすとべつべつにきのうします。 ちょっと、はずいからさくじょでもいいや！

humi_ak
質問者

お礼

下に同じです・・・・m(_ _)m 話の途中で申し訳ないですが解決という事で閉めさせていただきます。 　　e.style.display = ( flag = !flag ) ? 'block': 'none'; の考え方、とても参考になりました。 今度質問する時はbabu_babooさんのソースが読めるように勉強していきたいと思います。 ありがとうございました。

回答No.4

ならば、ねじってみました！ぼけつをほったかんがある？！ var toggleSwitch = function ( defState, func, that ) { 　defState = !!defState; 　var f = 'function' === typeof func; 　var result = function ( ) { 　　var flag = defState; 　　f && func.call( that, flag ); 　　defState = !defState; 　　return flag; 　}; 　return (result( defState ), result); }; var dispBlock = function ( id ) { 　var e = document.getElementById( id ); 　return e ? function ( flag ) { 　　e.style.display = flag ? 'block': 'none'; 　}: false; }; var cont_pop = toggleSwitch( true, dispBlock( 'scon1' ) );

humi_ak
質問者

お礼

ちょっとレベル高くて私にはまだ早いようです(@_@;) var f='function'===typeof func;ってなんで"="が3連結？ f&&func.call(that,flag);ってなにしてるの!? と全ての行に対して言えてしまいそうなのでやめておきます・・・。 汎用性は無いにしても最初の方に出てきたコードが今の私には丁度良いようでした^^; スマートなソースを書くにはもっと努力が必要ですね(>_<) ありがとうございます。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

＞ぐろーばるへんすうのflagもいまいちだけど ちょいとひねってみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> body { background-color:#eeeeee; } div.content{ background-color:#ffcc66; width: 100px; height: 20px; } </style> <script type="text/javascript"> <!-- window.onload = function() { document.getElementById('cont1').onclick = (function() { var flg = true; return function() { document.getElementById('scon1').style.display = (flg=!flg)?'block':'none'; } })(); } //--> </script> </head> <body> <div id="cont1" class="content">Content1</div> ↓これを表示/非表示させたい <div class="subcontent" id="scon1"> SubContents </div> </body> </html>

humi_ak
質問者

お礼

読み慣れない記述の解読に難航しております(>_<) window.onload=(function(){...})();の部分がいまいちピンときません。 onload=の先、function()を囲んでいる()はeval()と同等という記述を見つけたのですが 文字列ではないfunction(){・・・}を()しないと動かないのは何故でしょうか？ あと、その後に再び()を付けるのもよくわかりません・・・。

回答No.2

こういうのは？ var flag = true; function cont_pop( ) { 　var e = document.getElementById( 'scon1' ); 　e.style.display = ( flag = !flag ) ? 'block': 'none'; } でも、いか、いろいろ。 <body bgcolor=#EEEEEE> とか、 width: 100; height: 20; とか、 <span> が、いきなりとうじょう！（いんらいんようそが、いきなりは・・・） とか ぐろーばるへんすうのflagもいまいちだけどね^^;

humi_ak
質問者

お礼

ソースコードが素人丸出しなのはごめんなさい(汗 これから勉強していきますm(_ _)m >e.style.display = ( flag = !flag ) ? 'block': 'none'; 参考になります、というか答えですよね^^; 条件文がその形で省略できる事も知りませんでした・・・。 直感的なコードしか書けない私にはとてもスマートに見えます。 ありがとうございました。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ぐぐってみれば、使い方の説明はたくさん見つかる http://javascriptist.net/ref/element.style.visibility.html http://www.nurs.or.jp/~sug/html/chap6/samp5.htm http://allabout.co.jp/internet/javascript/closeup/CU20010228/index.htm http://www.red.oit-net.jp/tatsuya/java/setumei2.htm

humi_ak
質問者

お礼

お礼遅れまして、すいません。 検索の仕方が下手だったんですね・・・。 styleとか部分的な情報は手に入ったのですが、 それらを繋ぎ合わせる知識が足りませんでしたm(_ _)m とても参考になるリンクありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • borderの箇所をマウスでクリック

    cssでborderを指定し ajaxで枠内、枠外では何も動作しないが borderの箇所をマウスでクリックした場合のみ 動ささせるにはどのようにすればいいでしょうか。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("div.button").mousedown(function () { $("div#message").text("マウスのボタンが押されました。"); }) $("div.button").mouseup(function () { $("div#message").text("マウスのボタンがはなされました。"); }) }) </script> <style> .button { border: solid 1px #0094ff; background-color: #e1e1e1; width: 200px; height: 32px; } </style> </head> <body> <div class="button">枠</div> <div id="message"></div> </body> </html>

    • ベストアンサー
    • AJAX
  • 指定した背景画像をサイトを訪れるたびに切り替える

    Javascript初心者で、全く見当がつきません。 お力をお貸しください。 参考サイトのように、 Bodyではなく、DivのID一部分のみ、 背景画像がサイトを訪れるたびに切り替わるようにしたいのですが， どのサンプルも「Body」の背景が変わってしまいます。 どなたか、お答えして頂けないでしょうか？ <参考サイト> http://www.upenn.edu/ <現在記述中のソース> <html> <head> <style type="text/css"> #content { color: #ffe700; font-size: 30px; height: 600px; } </style> <title>見る度に背景色が変わります</title> <script language="JavaScript"> <!-- function color(){ bgcolor = "#"; for(i = 0 ; i < 6 ; i++) { //0から15の乱数を発生させる color = Math.floor(16 * Math.random()); //16進数に変換 color = color.toString(16); //つなぎ合わせる bgcolor = bgcolor + color; } //文字列を背景色に document.bgColor = bgcolor; } //--> </script> </head> <body onLoad="color()"> 見る度に背景色が変わります<br> <div id="content"> ここの背景にランダムに画像が変更して欲しい。Bodyではなく、Divの指定したID内にのみ表示して欲しいのです</div> </body> </html>

  • URL末尾に特定の文字を含む場合に非表示だったdivを表示に切り換えたいのですが。。

    URL末尾に特定の文字を含む場合にcssで非表示だったdivを表示に切り換えるということをやりたいのですが。。 以下のようなソースになります。 このindex.htmlの末尾に?num2などを追加した場合に、 window.location.searchでURLの?以下を取得して 取得した値と一致したidを持つdivはdisplay:block;を上書きして表示するということをやりたいです。 なんとなくできそうな気がするのですが、実際にどのように記述すれば良いのかわかりません。。 また同様の方法で複数のdivを表示したい場合はどのようにすれば良いでしょうか？ 例えばnum1とnum4とnum5のdivを表示するなどです。 Javascriptにお詳しい方教えていただけますでしょうか？ 不躾な質問ですが、よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- div#num0,div#num1,div#num2,div#num3,div#num4,div#num5 { width:100px; background-color:#ccc; margin:10px; display:none; } --> </style> </head> <body> <div id="num0">１番目</div> <div id="num1">２番目</div> <div id="num2">３番目</div> <div id="num3">４番目</div> <div id="num4">５番目</div> <div id="num5">６番目</div> </body> </html>

  • クリックして画像を表示JavaScriptについて

    友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。

  • JQueryでクリック時のタグの親子の関係について

    以下のコードのspanをクリックするとspanとdivをクリックしたことになってしまいます。 spanをクリックしてもdivをクリックしたことにしないようにするには どうすればよいのでしょうか？ <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style> div { padding: 20px; background: #EEE; } </style> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(function(){ $("div").click(function(){ console.log("click div"); }); $("span").click(function(){ console.log("click span"); }); }); </script> </head> <body> <div> <span>Click!</span> </div> </body> </html>

  • ページの表示切替について

    いつもお世話になっています。 今ボタンを押すとページ移動なしに表示が切り替わるページを製作しています。 【ソース】***********************: <HTML> <HEAD> <script type="text/javascript"> //<![CDATA[ function petChange(tabNo) { var i, pets = 3; for (i = 1; i <= pets; i++) { document.getElementById("tabPet" + i).className = "tab_selector"; document.getElementById("pet" + i).className = "subPet"; } document.getElementById("tabPet" + tabNo).className = "tab_selector selected"; document.getElementById("pet" + tabNo).className = "mainPet"; } //]]> </script> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <style type="text/css"> /* タブ */ .tab_selector { border : 1px solid #cccccc; line-height : 1.5; margin : 10px 0px; padding : 2px 5px; cursor : pointer; background-color : #ffffff; } .selected { background-color : #cccccc; } .mainPet { padding : 0px 10px; display : block; } .subPet { display : none; } </style> </HEAD> <body> <!-- 切り替え部分 --> <div class="petChanger"> <span id="tabPet1" class="tab_selector selected" onclick="petChange(1);">AAAA</span> <span id="tabPet2" class="tab_selector" onclick="petChange(2);">BBBB</span> <span id="tabPet3" class="tab_selector" onclick="petChange(3);">CCCC</span></div> <div id="pet1" class="mainPet"> <TABLE> <TBODY> <?php include_once('aaaa.php') ?> </TBODY> </TABLE> </div> <!-- ペット表示 --> <div id="pet2" class="subPet"> <TABLE> <TBODY> <?php include_once('bbbb.php') ?> </TBODY> </TABLE> </div> <div id="pet3" class="subPet"> <TABLE> <TBODY> <?php include_once('cccc.php') ?> </TBODY> </TABLE> </div> </body> </HTML> ***************************** 「aaaa」を押すとaaa.phpを読み込み、「bbbb」を押すとbbbb.phpを読み込み・・・としたいのですが、実際動かすとページ表示時に「aaaa.php」が問題なく表示されるのですが、「bbbb」を押すと「aaaa.php」の下に追加される形で「bbbb.php」の内容が表示されます。 これを「bbbb」を押したとき「aaaa.php」を非表示にして「bbbb.php」の内容を表示する、というようにしたいのですがどのように変更すればよろしいでしょうか？ <?php include_once('aaaa.php') ?> という場所を文字列に置き換えた場合は正常に動作したため、恐らくphpを読み込む際に問題が発生しているようです。 何卒よろしくお願い致しますm(_ _;)m

  • Dreamweaverプロパティインスペクタのスタイル

    macOSX 10.4.11、DreamweaverCS３でサイトを作っています。 CSS-------------------------- .cont { padding-right: 20px; padding-left: 20px; width: 800px; } -------------------------------- デザインビューより、スタイル指定したい部分を選択し、 プロパティインスペクタのスタイルのところからスタイルを選ぶと、自動で<span class="cont"></span>で囲まれます。 これを自動で<div class="cont"></div>のように、divで囲みたい場合、どのようにしたらよいでしょうか。

  • JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。

    JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。 例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。 ソースは以下になります。 前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } --> </style> <script language=javascript> <!-- function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; } var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className=='XXX') { allElement[j].style.display = "block"; } } } --> </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>

  • 文字列の表示/非表示

    下記のコードで、ボタンを押すたびに、 sample1 sample2 sample3 の３個の文字列の非表示/表示が切り替わるようにしたいのですが、 alert(elements.length+"個の要素を取得しました"); の実行で、class="sample"のエレメントの個数は正しく取得できているようなのですが、 elements.style.display = elements.style.display == "none" ? "block" : "none"; で非表示/表示が切り替わってくれません。 何か書き方が悪いのでしょうか？ ご経験のある方、御教示ください。 <html> <head> <title>document.getElementsByClassName - class名を元にエレメントを取得する</title> </head> <!--class名を元にエレメントを取得するのサンプル--> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function execute() { var elements = document.getElementsByClassName("sample"); alert(elements.length+"個の要素を取得しました"); elements.style.display = elements.style.display == "none" ? "block" : "none"; } //--> </script> <body> <div id="sample1" class="sample" style="display:none;">sample1</div> <div id="sample2" class="sample" style="display:none;">sample2</div> <div id="sample3" class="sample" style="display:none;">sample3</div> <button onclick="execute()">サンプル実行</button> </body> </html>

  • ＪＳの記述を別ファイルに移す

    下記のＨＴＭＬ内の　<script type="text/javascript">～</script>　をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する