• 締切済み

htmlのチェックボックスで動的にボタンを作成

神崎 渉瑠（@taloo）の回答

回答No.2

まず1段階目として、HTMLの話です。 JavaScriptを一切考えずに、 「どの画面をどのフレームに表示すれば良いか」 「表示したいフレームを指定するには、どのフレームname （ target 属性 ）を指定すれば良いか」 というのを考えてみてください。 --------------------------- ２段階目として、フレームを使わない画面を作ってください。 その画面だけで、ボタンを押すと、ページ内の他の場所に新しくボタンを生成したり、削除するJavaScriptを作ってみてください。 もうちょっと例を言うと、 <div id="output">おはよう</div> <BUTTON type="button">決定</BUTTON> 上記「決定」ボタンを押すと、「おはよう」という文字を消して「こんにちは」に書き換える処理を作ってみてください。 --------------------------- ３段階目として、1段階目で作ったフレームを、２段階目で作った画面と連携（画面間通信）させてください。

この回答がついた質問に戻る
回答 全件
ActiveXとフレームの構成は、今でもIE限定で使えなくはないですが…
HTMLじゃなくて、普通にCか何かでプログラム書いたほうが良いですね。…
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • IE8でli:hoverが効かない

    Window7 IE8を使っています。 ホームページにｃｓｓを使ったドロップダウンメニューを導入したいのですが、 li:hoverが効きません。 ｃｓｓかhtmlが間違っているのかと思い、念のためいろいろなサイトから ｃｓｓドロップダウンメニューの例文をもらってきて 書き込んでみましたが、どうしてもサブメニューが表示されません。 たとえば、 【css】 /* メインメニュー */ #menu ul { display:block; list-style-type: none; margin:0; padding:0; } /* サブメニュー1段目 */ #menu ul ul{ display:none; position:absolute; top:100%; left:0; } /* サブメニュー2段目以降 */ #menu ul ul ul { top:0; left:100%; } /* リスト */ #menu li { float:left; } #menu li li { clear:both; } #menu li:hover { position:relative; } #menu li:hover > ul { display: block; } 【html】 <body> <div id="menu"> <ul> <li><a href="#">menu1</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a> <ul> <li><a href="#">submenu3-1</a></li> <li><a href="#">submenu3-2</a></li> <li><a href="#">submenu3-3</a></li> </ul> </li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> <li><a href="#">submenu8</a></li> <li><a href="#">submenu9</a></li> </ul> </li> </ul> </div> </body> メニューにカーソルをもってきても、 サブメニューが表示されません。 原因や回避方法を教えていただけないでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • <ul>タグでのリストの使い方

    こんばんわ。 すみません。リストをCSSで体裁を整え、ここまでできましたが、各リストの下に、ラインの画像を入れたいのですが、うまくいきません。。 画像を入れるやり方を教えてください～ <tr> <td> <div class="abc"> <ul> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/08/10<br> ○○○○</a></li> </ul> </div> </td> </tr>

    • ベストアンサー
    • HTML
  • ドラックアンドドロップ？

    質問させていただきます。 下記のようなページを作っています。 ドラック&ドロップで画像の移動が出来るページを作成しています。 ドラック&ドロップで画像を動かせるようにはなったのですが、 <div id="menu"> <ul> <li class="co_info_li_line01">担当：hoage</li> <li>03-5452-3711　hoge@hoge.co.jp</li> </ul> </div> など、メニューのulタグ、liタグ等、動かす必要の無いところ まで反応してしまいます。 回避方法がわかりません。 どなたかわかる方ご教授願います、 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <title>Back and forth!</title> <link rel="stylesheet" type="text/css" href="jslib/bill.css" /> <link rel="stylesheet" type="text/css" href="jslib/highslide/highslide.css" /> <script type="text/javascript" src="jslib/prototype.js"></script> <script type="text/javascript" src="jslib/scriptaculous.js?load=effects,dragdrop"></script> <script type="text/javascript" src="jslib/bill.js"></script> <script type="text/javascript" src="jslib/highslide/highslide-with-gallery.js"></script> </head> <body> <div id="head"> <div id="birukenTop"> <a href="http://www.hogehoge.com"><h1><span>検索システム</span></h1></a></div> </div> <div id="menu"> <div id="co_info"> <p class="hello_ID">ようこそ！hoge様</p> <ul> <li class="co_info_li_line01">担当：hoage</li> <li>03-5452-3711　hoge@hoge.co.jp</li> </ul> </div> <div class="clr"></div> <div id="menu_tab"> <!- <ul> <li><img src="images/cmn/head_tag01_2.jpg" alt="検索1" width="161" height="31" border="0" /></li> <li><img src="images/cmn/head_tag02_1.jpg" alt="検索2" width="161" height="31" border="0" /></li> <li><img src="images/cmn/head_tag03_1.jpg" alt="おすすめ物件" width="161" height="31" border="0" /></li> </ul> </div> <div id="menu_tab_foot"> <ul> <li>検索3</li> <li>ページを開く</li> </ul> </div> </div> <div class="clr"></div> <div id="main"> <form name = "imagepic"> <UL id="gloop1"> <li id="2020:1"> <img src="sA01.jpg"> <input type="checkbox" id ="room" name="room" value="2020:1"> <div class="highslide-caption"> <img src="images/search_detail.gif" alt=""> </a><br> </div> </div> </li> <li id="2304:6"> <img src="sB01.jpg"> <input type="checkbox" id ="room" name="room" value="2304:6"> </div> </li> </UL> <span id="parisinfo">順番1：</span> <BR> <P><INPUT size="20" name="hid_gloop1" id="hid_gloop1info" value= "gloop1"></P> <BR> <P><INPUT size="20" name="kekka" id="kekka_id" value= ""></P> <INPUT type="button" name="登録" value="test" onclick="func_search()"> </form> </div> <div id="foot"> <p>2007</p> </div> </div> </body> </html>

  • プルダウンとチェックボックスの連動

    はじめましてよろしくおねがいします。 やりたいことはプルダウンのメニューの中身を活性したり非活性に したいのですが、どのようにやるのか想像がつきません。 以下にソースを貼り付けました。 チェックボックスにチェックされた場合はメニューの中身の■Yahoo!をリンクさせない様にしたいです。 チェックが外れたときはメニューの中身はすべてリンクで表示します。 現状はすべてリンクしかできていないです。 チェックボックスとの連動の方法、メニューの中の非活性の方法を教えてください。よろしくおねがいします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR><BR><BR> <FORM> <INPUT TYPE ="checkbox">ここにチェックを入れるとプルダウンの■Yahoo!のみ非活性にしたい。 </FORM> </BODY> </HTML>

  • Jquery タブで、４つのliのうち、ひとつだけ除外

    お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？

  • jQuery多層式アコーディオンメニューについて。

    javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。 これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。

  • プルダウンのメニュー表示について

    JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 　●メニュー1-1　　●メニュー1-2 　●メニュー1-3　　●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？ 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？ 以下がコードの一部です。 [html] <div class="tree"> 　　<a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> 　　<div class="tree_sub"> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-1</li> 　　　　　　<li>●メニュー1-2</li> 　　　　</ul> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-3</li> 　　　　　　<li>●メニュー1-4</li> 　　　　</ul> 　　</div> </div> <div class="tree"> 　　<a href="#">○メニュー2</a> </div> [css] div.tree { 　　border-bottom:1px solid #000000; 　　width:365px; } div.tree_sub ul li { 　　float:left; } div.tree_sub ul li.left { 　　width:50%; }

  • IE でカラム落ちします。

    CSS 初心者です。 pagebodyの中に ２カラム（mainContentとsidebar1）レイアウトをしたいのですが、 IE6だけ左のmainContentがカラム落ちしてしまいます。 検索して色々試したのですが、私には理解ができず。 教えていただけると助かります。 ーーーーーcssーーーーーーー #container { width: 800px; background: #FFFFFF; margin: 0 auto; text-align: left; } #pagebody{ width: 780px; background: #D6E3FF; } #mainContent { float: leftt; width:600px; padding:0; background: #fff; } #sidebar1 { float: right; width:170px; background: #D6E3FF; } -------html------------- <body> <div id="container"> <!--navi上--> <script src="../js/h_navi.js" type="text/javascript"></script> <div id="pagebody"> <div id="sidebar1"> <ul> <li id="menu1"><a href="#">専属プロヂュース</a></li> <li id="menu2"><a href="#">出演依頼</a></li> <li id="menu3"><a href="#">メンバー紹介</a></li> <li id="menu4"><a href="#">ニュース</a></li> <li id="menu5"><a href="#">最新ニュースはこちらから</a></li> </ul> </div> <!-- end #sidebar1 --> <div id="mainContent"> <h1> メインコンテンツ </h1> <p>テキスト</p> <p>テキスト.</p> <h2>見出し </h2> <p>テキスト</p> <!-- end #mainContent --></div><br class="clearfloat" /></div><script src="../js/footer.js" type="text/javascript"></script> </div> </body> よろしくお願いします。

    • 締切済み
    • CSS
  • 表の文字サイズ変更ボタンについて教えてください。

    表の文字サイズ変更ボタンについて教えてください。 以前、以下の内容で質問したのですがサンプルを掲載しなかったので再度質問させてください。大きな表をひとつ作成してその中をメニューボタンやコラムの場所用に分割配置したページを作成しました。jqueryをアレンジして、文字サイズボタン作成して動かしてみるのですが、表の中にある文字サイズが変更されません。表を使用せずにネット上に出ているjsファイルを使用してテストページを作成するとうまく文字サイズが変わってくれるのですが・・・・？　以下がアレンジしたソースです。 <script type="text/javascript" src="/jquery.js"></script> <script type="text/javascript" src="/jquery.textresizer.js"></script> <script type="text/javascript" src="/jquery.cookie.js"></script> ul { list-style:none; } ul li { padding:0;display:inline; } ul li a { padding:3px 4px;text-decoration:none;color:#333;background:#dcdcdc;border:1px solid #505050; } ul li a:hover { background:#fafafa; } .small-text { font-size:x-small; } .medium-text { font-size:small; } .large-text { font-size:large; } .larger-text { font-size:x-large; } <script> $(function(){ $("ul.textresizer a").textresizer({ target: "#content", sizes: [ ".8em", "1em", "1.5em", "2em" ] }); }); </script> </head> <body> <BODY> <div id="content"> <DIV id="container"> <div id="main"> <DIV id="header" align="center"> <TBODY> <TR> <TD align="right" nowrap style="font-size : 10px;"> <ul class="textresizer"> <li><a href="javascript:void(0)" class="small-text" title="Small">A</a></li> <li><a href="javascript:void(0)" class="medium-text" title="Medium">A</a></li> <li><a href="javascript:void(0)" class="large-text" title="Large">A</a></li> <li><a href="javascript:void(0)" class="larger-text" title="Larger">A</a></li> </ul> </TD> ・ ・ ・ </div> </div> </div> </div> 自分の希望としては、ボタンを押すごとに大きくなったり、小さくなったりしてほしいのですが・・・？ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • javascriptとCSSを使ってのドロップダウンメニュー作成

    CSSとJavaScriptを使って ドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。 ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する