• ベストアンサー

HTMLでボタンを設置して、ボタンが押されたらHTMLの内容を書き換え

HTMLでボタンを設置して、ボタンが押されたらHTMLの内容を書き換えたいのですが。 HTMLでできるのでしょうか？ いくつかのリンクがあり、それぞれ横にチェックボックスが付いています。 チェックボックスがONの場合そのリンク表示を削除したいのです。

  • kkk311
  • お礼率61% (145/235)
  • HTML
  • 回答数5
  • ありがとう数14

質問者が選んだベストアンサー

  • ベストアンサー
  • zeff
  • ベストアンサー率69% (137/198)
回答No.2

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>

kkk311
質問者

お礼

ありがとうございます！ 参考にさせていただきます。 動作的にはこのような感じで全くOKなのですが、 javascriptを使うと上にセキュリティ保護の黄色いバーがおりてくるのが、 いちいちこれをクリックしないといけないところが、困ります。 セキュリティなどの変更をせずに無駄な動きなしで動作するものというのはないでしょうか・・・

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (4)

  • think49
  • ベストアンサー率59% (285/482)
回答No.5

> 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)
回答No.4

#2です。 ＞javascriptを使うと上にセキュリティ保護の黄色いバーがおりてくるのが、 テキストエディタからIEでプレビューしているとかでしょうか？ そういうの聞いたことがあるような。。 こちらはブラウザでのみ確認しましたが出てきません。 それかセキュリティレベルの設定のせい？ ごめんなさい、わからないです＾＾；

kkk311
質問者

お礼

おそらくIEでセキュリティレベルの問題で出てくるようです。 もう少し調べてみます、ありがとうございます！

全文を見る
すると、全ての回答が全文表示されます。
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

javascriptをつかわないのであれば、サーバーサイドのプログラムに毎回データを おくってページを読み直すことです。 サーバーサイドのプログラムがわからないのであればそっくりなページをつくっておいて そのページに飛ぶといいでしょう

kkk311
質問者

お礼

ありがとうございます！ ただ。サーバーにはアップせずにHTMLファイルは常にローカルにあります。 自分でお気に入りサイトのリンク集を作ろうとしています。 登録はC#プログラムで小さいフォームにドラッグアンドドロップでできるのですが、 削除するのはHTML側でできるようにしたいと思っているのです。

全文を見る
すると、全ての回答が全文表示されます。
  • neko-ten
  • ベストアンサー率55% (1287/2335)
回答No.1

HTML単体では無理。 DOMなりなんなりで、要素の書き換えを行います。 書き換えだけであれば、GetElementByIdメソッド等でIDからオブジェクトを指定し、そのあとはStyleで非表示にするなり、innerHTMLで書き換えを行うなりすることになります。

kkk311
質問者

お礼

ありがとうございます。 やはりHTMLでは無理ですか、他の方法を探してみます。 ありがとうございました！

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • HTMLの内容がすべて表示されるまで、ボタンを押せないようにするには

    HTMLで比較的多くの量のデータを表示しており、表示にJavaScriptでコンボボックスの選択肢の初期化等をしています。 通常は、データを表示している途中であってもボタンが押せてしまうため、JavaScriptでの処理がされる前に、不正なデータがサーバーに送られてしまい、不具合が発生しています。 ボタンを使用不可にしておき、JavaScriptで使用可にするなどの対策は思いつきましたが、HTMLのオプションなど、もっと簡単な方法は無いでしょうか。

    • ベストアンサー
    • HTML
  • HTMLでのタイマーの設置

    プログラミングって程ではないかと思いますがリンクの時間指定をHTMLで可能でしょうか？ 朝8時から次の日の夜10時までリンクが貼られててその時間を過ぎるとリンクが切れるみたいなことは可能ですか？ ASPではタイマー設置しているのですがHTMLでもし簡単にできる方法があればぜひ教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLだけでボタン作成

    リンクボタンとしてHTMLだけで作成したいのですがこのサイトでも使用されている送信フォームのボタン（灰色の四角いボタン）を使おうと考えています。 ボタンの色や形、大きさを変えることはできるのでしょうか？

    • ベストアンサー
    • HTML
  • 同意するボタン

    どうしてもわからないので助けてくださいませ～～ 「同意する」でチェックボックスにチェックが入ると お問い合わせフォームにとぶボタンをつけたいのですが、 「同意する」のチェックボックスは一つで ボタン（リンク先 は別々）は2つにしたいのですが可能でしょうか。 以下のページの「次へ」が2つあるような感じです。 ※リンク先は別々 https://www.fsa.go.jp/sesc/watch/ どうぞよろしくお願い致します

  • 「戻る」ボタンの設置について

    初めまして、よろしくお願いいたします。 ショッピングサイトを作成しています。 もともとは、商品ごとの詳細ページに「カートに入れる」ボタンがついていたのですが、その同じページに、前のページに戻る機能をつけたいと思っています。 「ひとつ前に戻る」というテキストにリンクを貼る方法だと表示も動作も正常なのですが、<FORM>を使用して「戻る」ボタンを設置したところ、「カートに入れる」ボタンが正常に動作しなくなってしまいました（「戻る」機能は働くのですが）。 具体的には、ボタンをクリックするとカートのページには進むのですが、「カートには何も入っていません」と表示されてしまいます。 <FORM>の設置位置を、<tr>の内側（<td>の外側）にしても同じ状態で、<table>の外に出すと全く動作しなくなってしまいます。 「戻る」ボタンの設置について、アドバイス頂けないでしょうか。 よろしくお願いいたします。 ************************************************* 【テキストにリンク】 <table> 　<tr> 　　<td>数量：$$SA_CartQuantity$$個 　　　<input name="submit" type="image" id="submit" src="http://***.227.210.40/images/cart2.gif" alt="カートに入れる" align="absmiddle" height="22" width="122" /> 　　</td> 　</tr> 　<tr> 　　<td> 　　　<A HREF="javascript:history.go(-1)">ひとつ前に戻る</A> 　　</td> 　</tr> </table> 【[FORM]ボタンを使用】 （字数制限により、前半省略します） <FORM> 　<tr> 　　<td> 　　　<INPUT TYPE=button VALUE="　戻る　" onClick="self.history.back()"> 　　</td> 　</tr> </FORM> </table>

  • いいね！ボタン等をホームページに設置したいです。

    『mixiイイネ!ボタン』 『Twitter ツイートするボタン』 『Facebook いいね!ボタン/Sendボタン』 『Google+1ボタン』 『Google+バッジ』『GREE いいね!ボタン』『はてなブックマークボタン』『Yahoo!ブックマークボタン』『LinkedIn(リンクトイン)ボタン』 をホームページに設置したいです。 簡単で、また一括で設置するHTMLなどありますでしょうか？ トンチンカンな質問でしたらすみません。 よろしくお願いいたします。

  • チェックによる複数ボタンの有効化

    済みません教えてください。 同意するのチェックボックスにチェックを入れないと 「次へ進む」のボタンが有効にならないスプリクトがありまが、 複数のチェックボックスと複数のボタンを同時に行なう方法を教えてください。 例 A○ B○ C○ D○ E○ 「ボタン1」　←いつでも有効（キャンセル等） 「ボタン2」　←Bのチェックボックスにチェックが入ると有効になりクリックで1537.htmlへリンク 「ボタン3」　←Dのチェックボックスにチェックが入ると有効になりクリックで2468.htmlへリンク とこんな形です 初心者なので、<head>　へ入れる文と<body>へ入れる文を教えてください。

  • チェックボックスとボタンの組み合わせによってリンク先を決める

    当方、script等にはまったく持って初心者です。 以下の仕様のJavascriptが作りたいのですが、全然わからないのです・・・。 チェックボックスAとボタンAを押す・・・・1のリンク先へ チェックボックスBとボタンAを押す・・・・2のリンク先へ チェックボックスCとボタンAを押す・・・・3のリンク先へ チェックボックスAとボタンBを押す・・・・4のリンク先へ チェックボックスBとボタンBを押す・・・・5のリンク先へ チェックボックスCとボタンBを押す・・・・6のリンク先へ 見た目的にはこんな感じです。 ------------------- □暇なときに回答ください □困ってます □すぐに回答ほしいです [Aボタン][Bボタン] ------------------- という感じです。 チェックボックスは複数選択する予定はありません。 （なので、チェックボックスではなく、ラジオボタンでも可です）。 チェックボックスを複数選択しない・・というとこへのツッコミはなしでお願いします＾＾； 何卒よろしくお願いいたします。

  • サイト上で「文字のエンコード」を切り替えるボタンって設置可能？

    サイトで時々文字の大きさを変えるボタン[小][中][大]ついているのを見ますが、 それと同じような感じで「文字のエンコード」を変えるボタンを設置することは不可能なのでしょうか？ せっかくアクセスしてもらっても文字化けしていたら不便だと思うので・・・ 画像で「文字化けしている場合はここをクリックして下さい」見たいなボタン（もしくはリンク？）を表示出来るといいのですが。 よろしくお願いします。

  • web拍手ボタンの設置方法について

    web拍手ボタンを設置しようと思ったんですけど、良く分かりません。 『サイト内のweb拍手ボタンを設置したい場所に貼り付けてください。』と書かれてあったんですけど、どうやればサイト内に張り付けられるのかが分からないんです。 出来れば、サイトのタイトルの横辺りに付けたいんですけど・・・。 あ、あと標準タグをやると、『セキュリティー上使用できません』とも表示されました。 どうすれば良いのでしょうか？どうか教えてくれませんか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する