- 締切済み
onclick属性に外部jsと外部cssの記載方法
表題の通りclickイベントを付与したいのですが、記載方法が分からなくて困っています。 例） <div id="sample1"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'">ぴーしー</a> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'">もばいる</a> </div> 上記のままだと更新ボタンを押さないと反映されなかったので、onclick属性にjquery.mobileを付与したいと思いまして。toggle,appendToなども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。
- chapital2005
- お礼率66% (16/24)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
なんというか…目も当てられない… onclickにそんなごちゃごちゃ書かずに関数の呼出しだけにしないのは何故？ なんで<link>がそんなところにある？ それと、<a>タグはリンクのためのものなのだから<a href="javascript:void(0);" onclick=""></a>なんてのは(リンク先の存在しない<a>タグは)やっちゃダメ。そういう機能はボタンでやりましょう。 jQueryなんか手を出す前にそういう基本をちゃんとしてください。 あと、そもそも。「何がしたいのか」の説明がない。「表題の通り」とかいう割にタイトルと本文の整合性が取れていない。 コードだけ書いたものから質問者の意図を読み取るのは回答者のすることじゃありません。余計な労力を使わせないように。
関連するQ&A
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<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
- onclickで表示/非表示させている動きに、別ページからリンクさせるには
JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01"> ・・・ </div> <div id="test02"> ・・・ </div> <div id="test03"> ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか？ 恐れ入りますがよろしくお願い致します。
- ベストアンサー
- JavaScript
- 表示中のタブに色を付けたい
タブ1111～5555は青色表示されていますが 選択中には常に赤色表示させておきたいのですがどうすれば良いのでしょうか。 ご教授ください <html> <head> <script type="text/javascript"> function ChangeTab(tabname) { // 全部消す document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; document.getElementById('tab5').style.display = 'none'; // 指定箇所のみ表示 document.getElementById(tabname).style.display = 'block'; } // --></script> </head> <body> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">1111</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">2222</a> <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">3333</a> <a href="#tab4" class="tab4" onclick="ChangeTab('tab4'); return false;">4444</a> <a href="#tab5" class="tab5" onclick="ChangeTab('tab5'); return false;">5555</a> <div id="tab1" class="tab"> <div class="information-newwarp">aaaa</div> </div> <div id="tab2" class="tab"> <div class="information-newwarp">bbbb</div> </div> <div id="tab3" class="tab"> <div class="information-newwarp">cccc</div> </div> <div id="tab4" class="tab"> <div class="information-newwarp">dddd</div> </div> <div id="tab5" class="tab"> <div class="information-newwarp">eeee</div> </div> <script type="text/javascript"><!-- // デフォルトのタブを選択 ChangeTab('tab1'); // --></script><!--■タブページデフォルト設定js--> </body> </html>
- ベストアンサー
- 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
- jabascriptの表示・非表示について
初心者です。 このタグでは、最初から「ここを表示する」が表示されるのですが、最初は表示されずに、「表示」ボタンを押すと初めて表示されるようにするにはどのようにすればいいのでしょうか。。 <p> <a href="#" id="link_view2" onClick="toggle_view2();return false;" style="display:none;">表示</a> <a href="#" id="link_hidden2" onClick="toggle_hidden2();return false;">非表示</a> </p> <div id="area_hoge2"> <p>ここを表示する</p> </div> <script language="JavaScript" type="text/javascript"> <!-- var elem2_1 = document.getElementById("area_hoge2"); var elem2_2 = document.getElementById("link_view2"); var elem2_3 = document.getElementById("link_hidden2"); function toggle_view2() { elem2_1.style.display = ""; elem2_2.style.display = "none"; elem2_3.style.display = ""; } function toggle_hidden2() { elem2_1.style.display = "none"; elem2_2.style.display = ""; elem2_3.style.display = "none"; } --> </script> 参考 http://pentan.info/javascript/sample/view_hidden.html 詳しい方お教えください<m(_ _)m>
- ベストアンサー
- JavaScript
- style.displayだと効率悪いから...
style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
- style.displayだと効率悪いから…
style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。
- ベストアンサー
- JavaScript
- firefoxだけ、javascriptが思うように動作しません。
firefoxだけ、javascriptが思うように動作しません。 下記、html記述です。 <a href="javascript:void(0);" onclick="show1()">tab1</a> <a href="javascript:void(0);" onclick="show2()">tab2</a> <a href="javascript:void(0);" onclick="show3()">tab3</a> <div id="page1">page1</div> <div id="page2">page2</div> <div id="page3">page3</div> 下記、javascript記述です。 function show1(){ page1.style.display="block"; page2.style.display="none"; page3.style.display="none"; } function show2(){ page1.style.display="none"; page2.style.display="block"; page3.style.display="none"; } function show3(){ page1.style.display="none"; page2.style.display="none"; page3.style.display="block"; } tab1をクリックすると、page1のみ表示 tab2をクリックすると、page2のみ… という風に動作させたいです。 IE、opera、chromeでは動作しますが、 firefoxだけ全く動作しません。 どのように修正すれば動くようになるでしょうか？ javascriptについては初心者なので、 基本的なところから間違っているのかもしれませんが、 ご回答よろしくお願いします。
- ベストアンサー
- JavaScript
- CSSのID名に配列を使えませんか？
以下のようなソースで、項目ごとにサブメニューの開閉をしようとしているのですが、サンプルの#a1～に該当するID名を、配列として定義することってできませんか？ <style type="text/css"><!-- #a1 { display:none; } #a2 { display:none; } #a3 { display:none; } // --></style> <script type="text/javascript"><!-- function disp(aaa) { obj = document.getElementById(aaa); if( obj.style.display =="block" ){ obj.style.display ="none"; }else{ obj.style.display ="block"; } } function create(bbb){ document.write(bbb); } // --></script> <body> ああああ<a href="javascript:void(disp('a1'))">◎</a><div id="a1"><script type="text/javascript">create("アアアア");</script></div><br> いいいい<a href="javascript:void(disp('a2'))">◎</a><div id="a2"><script type="text/javascript">create("イイイイ");</script></div><br> うううう<a href="javascript:void(disp('a3'))">◎</a><div id="a3"><script type="text/javascript">create("ウウウウ");</script></div><br>
- ベストアンサー
- JavaScript
- Javascriptで質問です２
セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを２段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
補足
何がしたいのか？ 「iphone・androidなどスマートフォンの場合ブラウザの変更出来るボタンリンクを付けたい」というのが希望です。 iphone・androidなどスマートフォンの場合（cookie・条件分岐OK） ブラウザの変更出来るボタンリンク（NG） cookieや条件分岐については問題なかったので、余計な情報は載せないほうがいいと思いまして、すいません。 【jquery.mobileの場合】 jquery.mobileはdata-theme（jquery.mobile上のcss）によって変わるので、<a>と<input>、<button>の表示上のデザインが異なってしまうので、極力<a>タグを利用したかったのですが・・・。 ご指摘いただいた通りボタンタグに変更します。 <div id="sample1"> <input type="button" value="ぴーしー" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'" /> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <input type="button" value="もばいる" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'" />