• 締切済み

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なども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。

みんなの回答

noname#158634
noname#158634
回答No.1

なんというか…目も当てられない… onclickにそんなごちゃごちゃ書かずに関数の呼出しだけにしないのは何故? なんで<link>がそんなところにある? それと、<a>タグはリンクのためのものなのだから<a href="javascript:void(0);" onclick=""></a>なんてのは(リンク先の存在しない<a>タグは)やっちゃダメ。そういう機能はボタンでやりましょう。 jQueryなんか手を出す前にそういう基本をちゃんとしてください。 あと、そもそも。「何がしたいのか」の説明がない。「表題の通り」とかいう割にタイトルと本文の整合性が取れていない。 コードだけ書いたものから質問者の意図を読み取るのは回答者のすることじゃありません。余計な労力を使わせないように。

chapital2005
質問者

補足

何がしたいのか? 「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'" />

関連するQ&A