- 締切済み
ネストされたdiv要素の中のa要素をクリック
ネストされたdiv要素の中にa要素があるのですが、クリック出来ませんでした何かいい方法はありませんか？ <div id="j,click"> <div> <section id="sample03"> <a class="button99 picture1 radius box_shadow" href="#" onclick="disp(99)；return false；">戻る<a> </section> <div class="button99 lineargrad1"></div> <div class="box-area1-128 picture1-area1"></div> <div class="button99 linargrad2"></div> <div class="button99 shadow"></div> <div> <div> このように作成しました。 jQuery.biggerlinkではクリック出来るようになりましたが、javascriptの関数は呼び出すことは出来ませんでした。
- R32gts4r
- お礼率25% (1/4)
- その他(ソフトウェア)
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- masakaze
- ベストアンサー率55% (131/235)
クラス属性でどんなCSSが適用されているかわからないので、このコードから見れる不備をいいますね。 a要素に対して終了タグが適切にできてない感じです。 <a>～</a>に修正してみてはいかが？
関連するQ&A
- DIV要素のボックスを移動させるスクリプト教えて
やりたい事は (1) Ｌ・Ｒという２つのラジオボタンを設置し、 ウィンドウ左に配置したＤＩＶ要素のボックスを、 Lをクリックでウィンドウ左、 Rをクリックでウィンドウ右に配置を変更させる。 (2) 画像ボタンを設置し、クリックされると ＤＩＶ要素のボックスを、ウィンドウ枠外へスライドさせ、 再クリックで元の配置にスライドさせ戻したい。 初心者のためスクリプトをどのように記述すれば、 良いか解らず質問させていただきます。 ご教授よろしくお願いします。 http://www11.ocn.ne.jp/~website/sample3/index.html 一応参考アドレスを記載させていただきますが この記述方法だと、ＤＩＶ要素のボックスが左側にあるとき、 画像ボタンクリックで、ＤＩＶ要素のボックスを、 ウィンドウ枠外へスライドさせ、 再クリックで元の配置に戻すと、 その後、Rをクリックしても、ＤＩＶ要素のボックスが ウインドウ右側へ移動しなくなってしまいます。 ===== HTML ==== <body> <div id="wrapper"> <header></header> <nav></nav> <div id="box" class="box_l"> <label> <input type="radio" id="radio1" name="test" checked="checked" /> L</label> <label> <input type="radio" id="radio2" name="test" /> R</label> </div> <div id="tab" class="tab_l"></div> <section id="section01" class="section"> <p>PAGE1</p> </section> </div> <div id="page_top"></div> <footer></footer> </body> ==== CSS ==== .box_l { position: fixed; top:30px; left:0px; z-index: 2000; width: 90px; height: 160px; padding: 20px 5px 5px 5px; background-color: rgba(0,0,0,0.25); } .box_r { position: fixed; top:30px; right:0px; z-index: 2000; width: 90px; height: 160px; padding: 20px 5px 5px 5px; background-color: rgba(0,0,0,0.25); } .tab_l { position: fixed; top:30px; left:100px; z-index: 2000; width: 30px; height: 185px; background-color: rgba(0,0,0,0.25); background-image: url(../images/tnm2.png); background-position: center center; background-repeat: no-repeat; cursor: pointer; border-radius: 0 10px 10px 0; /* CSS3草案 */ -webkit-border-radius: 0 10px 10px 0; /* Safari,Google Chrome用 */ -moz-border-radius: 0 10px 10px 0; /* Firefox用 */ } .tab_r { position: fixed; top:30px; right:100px; z-index: 2000; width: 30px; height: 185px; background-color: rgba(0,0,0,0.25); background-image: url(../images/tnm1.png); background-position: center center; background-repeat: no-repeat; cursor: pointer; border-radius: 10px 0 0 10px; /* CSS3草案 */ -webkit-border-radius: 10px 0 0 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px 0 0 10px; /* Firefox用 */ } #section01 { min-height: 100%; min-width:320px; width: 100%; height: 1000px; } #section01 p { font-style: normal; font-weight: 400; color: #000; font-size: 48px; text-align: center; } ==== SCRIPT ==== $(window).on('load', function() { for (i = 1; i <= 2; i++) { document.getElementById('radio' + i).checked = i==1; } }); $(function() { $("[name='test']").click(function(){ var num = $("[name='test']").index(this); if(num == 1){ $("#box").removeClass("box_l").addClass("box_r"); $("#tab").removeClass("tab_l").addClass("tab_r"); } else { $("#box").removeClass("box_r").addClass("box_l"); $("#tab").removeClass("tab_r").addClass("tab_l"); } }) $(".tab_l,.tab_r").toggle(function(){ $(".box_l").animate({'left':'-100px'},300); $(".tab_l").css('background-image','url(images/tnm1.png)').animate({'height':'40px','left':'0px'},300); $(".box_r").animate({'right':'-100px'},300); $(".tab_r").css('background-image','url(images/tnm2.png)').animate({'height':'40px','right':'0px'},300); }, function(){ $(".box_l").animate({'left':'0px'},300); $(".tab_l").css('background-image','url(images/tnm2.png)').animate({'height':'185px','left':'100px'},300); $(".box_r").animate({'right':'0px'},300); $(".tab_r").css('background-image','url(images/tnm1.png)').animate({'height':'185px','right':'100px'},300); }) })
- ベストアンサー
- HTML
- jQeryでランダムに要素を差し込むには？
よろしくお願い致します。 jQeryを使い、ランダムに要素を差し込む方法を探しております。 $('#wrapper').append('<div id="hogeA"></div>'); $('#wrapper').append('<div id="hogeB"></div>'); $('#wrapper').append('<div id="hogeC"></div>'); というjQeryで生成した３つの要素を以下のように、 リロードするごとにランダムな箇所へ差し込んで表示させるにはどうしたらよいのでしょうか？ 以下のようなHTMLへ <div id="warpper"> <div class="box"></box> <div class="box"></box> <div class="box"></box> <div class="box"></box> <div class="box"></box> <div class="box"></box> <div class="box"></box> </div> 読み込むと <div id="warpper"> <div class="box"></box> <div id="hogeA"></div> <div class="box"></box> <div class="box"></box> <div id="hogeC"></div> <div class="box"></box> <div class="box"></box> <div id="hogeB"></div> <div class="box"></box> <div class="box"></box> </div> リロードすると <div id="warpper"> <div id="hogeC"></div> <div class="box"></box> <div id="hogeA"></div> <div class="box"></box> <div class="box"></box> <div class="box"></box> <div class="box"></box> <div class="box"></box> <div id="hogeB"></div> <div class="box"></box> </div> 説明が至らない点は補足させて頂きますので、どうぞよろしくお願い致します。
- 締切済み
- JavaScript
- div要素を滑らかに動かしたい
<div id="div1" class="div1" onclick="init();">move box</div> 上記のようなdiv要素を、画面右方向へ滑らかに 動かしたいのですが、どのようなscriptを記述すればよいでしょうか？ setIntervalを使って0.5秒毎に1ピクセル右に移動、 というのを期待して以下のようなscriptを書いてみたのですが、 うまく動作しませんでした。 function init(){ setInterval(moveY, 500); } function moveY(){ var obj = document.getElementById("div1"); obj.style.left = obj.style.left+1 + "px"; }
- ベストアンサー
- JavaScript
- <Div>の中の要素の数を調べる
こんにちは。 タイトルの文が合っているのか分かりませんが、こういうことです。 たとえば、<div id="box">～～</div>の中に、 <a href="...">～</a>が何個あるかを調べて書き出す方法はありませんでしょうか。 JavaScriptで実現したいんですが、慣れてないので上手く出来ません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jquery クリック毎に連続したidを出力したい
jQueryを使ってクリック毎にclass="box1",class="box2"の様な形でクリックイベント毎に連続したタグを含んだテキストを出力したいと考えています。 単独なら例えば、下の様な形で済みますが、クリック毎に連続してbox2,box3の様な形*1で出力したいのですが、出来なくて困っています。 <div id="gen"> <input type="button" value="boxgen"> </div> <script> $(function() { $('#gen input').click(function() { $('#main').append('<div id="box1">box1</div>'); }); }); </script> *1 <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> <div id="box4">box4</div> <div id="box5">box5</div> 是非お詳しい方ご教授下さい。 大熊屋
- ベストアンサー
- JavaScript
- jQuery 円周上に配置した要素を加工したい
jQuery 円周上に配置した要素を加工したい ここに円周上に等間隔に要素を配置するコードがあります。 これを下記の要件を満たすためには、どんなコードにしたらよいですか？ ＜要件＞ ・基準点を赤丸で表示させる ・時計の文字盤のような数字の配置にする（真上がゼロ） ・円内の文字が上下左右とも、中央に来るようにする ・数字は赤丸を天にした向きに表示させる <script src='https://code.jquery.com/jquery-3.7.0.min.js'></script> <style> .main-board { position: relative; width: 300px; } .circle-box { } div.item { position: absolute; width: 40px; height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-color: #0dd; } </style> <section class="main-board"> <section class="circle-box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </section> </section> <script> $(function(){ var item_num = $('div.item').length; var deg = 360.0 / item_num; var red = (deg * Math.PI / 180.0); var circle_r = $("div.item").width() * 2.5; $('div.item').each(function(i, elem) { var x = Math.cos(red * i) * circle_r + circle_r; var y = Math.sin(red * i) * circle_r + circle_r; $(elem).css('left', x); $(elem).css('top', y); $(elem).text(i); }); }); </script>
- 締切済み
- JavaScript
- DIVの中の<a>について
CSS初心者です。 とんちんかんな質問かもしれませんが宜しくお願いします。 同じスタイルのDIVボックスを1ページに複数配置するので外部スタイルシートに .abc { } という風にしてDIVボックスにクラスを適用させたのですが、そのDIVボックスの中のある<a>とかを限定してCSSで設定する場合、外部スタイルシートには .abc a { } というような感じで指定してもいいのでしょうか？ DIVをIDで設定した場合は #abc a { } という風にすれば良いと本には書いてあったのですが、DIVにクラスを適用させた場合がわかりませんでした。 アホな質問かもしれませんが、宜しくお願いします。
- ベストアンサー
- CSS
- cssでのdiv要素内div要素の上部marginについて
毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。
- 締切済み
- HTML
- ランダムで表示させたブロック要素内のボタンクリックで、要素の変更
いつもお世話になってます。 今日はJavaScriptについて質問させてください。 2つのブロック要素（div）を、ランダムに表示させています。 function main() { boxID = new Array(); jmp = new Array(); img = new Array(); alt = new Array(); btn = new Array(); boxID[0] = 'view1'; boxID[1] = 'view2'; jmp[0] = 'url01.html'; jmp[1] = 'url02.html'; img[0] = 'img01.jpg'; img[1] = 'img02.jpg'; alt[0] = '画像１'; alt[1] = '画像２'; btn[0] = 'img/ch01.gif'; btn[1] = 'img/ch02.gif'; n = Math.floor(Math.random()*jmp.length); document.write("<div id='"+boxID[n]+"' class='box'>"); document.write("<h2><a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' alt='"+alt[n]+"' />"); document.write("</a></h2>"); document.write("<p><a href='#'><img ='"+btn[n]+"' alt='要素を切り替え' /></p>"); document.write("</div>"); } 更新するたびに、要素１と、要素２がランダムで出るとこまでは出来ました。 その中の【要素を切り替え】部分のボタンをクリックすることで、１と２を切り替えて表示させたいのです。 ランダムで【要素１】が出た場合、【要素を切り替え】ボタンをクリックすると【要素２】が表示されると言った具合です。 ↓↓↓切り替え用（ネット上からの拾い物） ■JavaScript function fh_change(view, menu, no, roopCount) { var element; for (var i = 1; i <= roopCount; i++) { element = document.getElementById (view + i); element.style.display='none'; } element = document.getElementById(view + no); element.style.display = 'block'; } ■HTML <div id="view1" class="box"> <h2><a href="url01.html"><img src="img01.jpg" alt="画像１" /></a></h2> <p class="btn" id="btn1"><a href="#" id="menu1" onclick="fh_change('view', 'menu', '2', 2);return false;"><img src="img/ch01.gif" alt="要素を切り替え" /></a></p> </div> <div id="view2" class="box" style="display:none;"> <h2><a href="url02.html"><img src="img02.jpg" alt="画像２" /></a></h2> <p class="btn" id="btn2"><a href="#" id="menu2" onclick="fh_change('view', 'menu', '1', 2);return false;"><img src="img/ch02.gif" alt="要素を切り替え" /></a></p> </div> 上手く合体させてあげることが出来ず、困ってます。 お詳しい方いらっしゃいましたら、どうかご助力お願いします！！
- ベストアンサー
- JavaScript
- div要素を綺麗に並べたいのですが困っています。
CSSのレイアウトで困っています。 現在ショッピングサイトを作っているのですがCSSの表示で困っています。 item_boxというdiv要素の中に更にitem_aというdivタグで包んだ商品写真とテキストのBOXをfloatで左に回りこみ させ横３列に並べています。 1段目だけなら表示に問題ないのですが2段目以降になると1段目の商品BOXの高さによっては横一列に綺麗に並びません。 何か良い解決策は無いでしょうか？ item_aにheightを指定すればいいのですが文字数によってはテキストが切れたり、または下に空洞が空きすぎたりするのでheight指定は避けたいです。
- 締切済み
- CSS
お礼
Dreamweaverのバグ？ もう一度入力し直し、biggerlinkで使えるようになりました。