- ベストアンサー
HTMLでボタンを設置して、ボタンが押されたらHTMLの内容を書き換え
HTMLでボタンを設置して、ボタンが押されたらHTMLの内容を書き換えたいのですが。 HTMLでできるのでしょうか？ いくつかのリンクがあり、それぞれ横にチェックボックスが付いています。 チェックボックスがONの場合そのリンク表示を削除したいのです。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
HTMLのみでは無理ですので、 JavaScriptの属性値生成と連想配列の組み合わせで作ってみました。 連想配列はまだ勉強不足なのであれですが。 <script type="text/javascript"> <!-- var aHrefList = new Array(); function OnOffHref(o){ //INPUTの親ノードであるPが子要素に持つAの0番目 var a = o.parentNode.getElementsByTagName("A")[0]; if(!a){return false;} if( o.type =="checkbox"){ if( o.checked ){ //href値を配列に保存しておく aHrefList[o.id] = a.href; //hrefを削除 a.removeAttribute('href'); }else{ //hrefを戻す(セットする） a.setAttribute('href',aHrefList[o.id]); } } } //--> </script> </head> <body> <form name="form1" id="form1" action="#"> <p><a href="#1">link1</a><input type="checkbox" value="link1" name="c1" id="c1" onclick="OnOffHref(this);"></p> <p><a href="#2">link2</a><input type="checkbox" value="link2" name="c2" id="c2" onclick="OnOffHref(this);"></p> <p><a href="#3">link3</a><input type="checkbox" value="link3" name="c3" id="c3" onclick="OnOffHref(this);"></p> </form> </body> </html> またはこうでも動きました。 <script type="text/javascript"> <!-- var aHrefList = new Array(); function OnOffHref(o,id){ //AのIDを引数として受け取ってオブジェクトを得る var a = document.getElementById(id); if(!a){return false;} if( o.type =="checkbox"){ if( o.checked ){ //href値を配列に保存しておく aHrefList[a.id] = a.href; //hrefを削除 a.removeAttribute('href'); }else{ //href値を戻す a.setAttribute('href',aHrefList[a.id]); } } } //--> </script> </head> <body> <form name="form1" id="form1" action="#"> <p><a href="#1" id="hoge1">link1</a><input type="checkbox" value="link1" name="c1" onclick="OnOffHref(this,'hoge1');"></p> <p><a href="#2" id="hoge2">link2</a><input type="checkbox" value="link2" name="c1" onclick="OnOffHref(this,'hoge2');"></p> <p><a href="#3" id="hoge3">link3</a><input type="checkbox" value="link3" name="c1" onclick="OnOffHref(this,'hoge3');"></p> </form> </body> </html>
その他の回答 (4)
- think49
- ベストアンサー率59% (285/482)
> javascriptを使うと上にセキュリティ保護の黄色いバーがおりてくるのが、いちいちこれをクリックしないといけないところが、困ります。 情報バーの警告かな？ --------- セキュリティ保護のため、コンピューターにアクセスできるアクティブ コンテンツは表示されないように Web ブラウザーで制限されています。 オプションを表示するには、ここをクリックしてください。 --------- Internet Explorer の情報バー :よく寄せられる質問 http://windows.microsoft.com/ja-JP/windows-vista/Internet-Explorer-Information-bar-frequently-asked-questions Windows XP SP2 の Internet Explorer の情報バーについて http://support.microsoft.com/kb/843017/ja > セキュリティなどの変更をせずに無駄な動きなしで動作するものというのはないでしょうか JavaScriptをローカルで利用しようとする問答無用で警告してきます。 ApacheなどのWebサーバをインストールして、127.0.0.1 で閲覧するか、IE以外のブラウザを使ってみてください。
- zeff
- ベストアンサー率69% (137/198)
#2です。 ＞javascriptを使うと上にセキュリティ保護の黄色いバーがおりてくるのが、 テキストエディタからIEでプレビューしているとかでしょうか？ そういうの聞いたことがあるような。。 こちらはブラウザでのみ確認しましたが出てきません。 それかセキュリティレベルの設定のせい？ ごめんなさい、わからないです＾＾；
お礼
おそらくIEでセキュリティレベルの問題で出てくるようです。 もう少し調べてみます、ありがとうございます！
- yambejp
- ベストアンサー率51% (3827/7415)
javascriptをつかわないのであれば、サーバーサイドのプログラムに毎回データを おくってページを読み直すことです。 サーバーサイドのプログラムがわからないのであればそっくりなページをつくっておいて そのページに飛ぶといいでしょう
お礼
ありがとうございます！ ただ。サーバーにはアップせずにHTMLファイルは常にローカルにあります。 自分でお気に入りサイトのリンク集を作ろうとしています。 登録はC#プログラムで小さいフォームにドラッグアンドドロップでできるのですが、 削除するのはHTML側でできるようにしたいと思っているのです。
- neko-ten
- ベストアンサー率55% (1287/2335)
HTML単体では無理。 DOMなりなんなりで、要素の書き換えを行います。 書き換えだけであれば、GetElementByIdメソッド等でIDからオブジェクトを指定し、そのあとはStyleで非表示にするなり、innerHTMLで書き換えを行うなりすることになります。
お礼
ありがとうございます。 やはりHTMLでは無理ですか、他の方法を探してみます。 ありがとうございました！
お礼
ありがとうございます！ 参考にさせていただきます。 動作的にはこのような感じで全くOKなのですが、 javascriptを使うと上にセキュリティ保護の黄色いバーがおりてくるのが、 いちいちこれをクリックしないといけないところが、困ります。 セキュリティなどの変更をせずに無駄な動きなしで動作するものというのはないでしょうか・・・