a.href の href を有効か無効にする選択

このQ&Aのポイント
  • aタグのhref属性を選択によって有効または無効にする方法を教えてください。
  • aタグのクリックアクションをリンクまたはJavaScriptに変更する方法を教えてください。
  • aタグを使用してクリックした時に色分けされたボタンのような効果を得る方法を教えてください。
回答を見る
  • ベストアンサー

a.href の href を有効か無効にする選択

<script language="JavaScript"> function fa(obja){ if(confirm())obja.href="a.html" else{obja.href=eval("javascript:void(0)") inp.value=0//↑がうまくいかない。hrefを無効にしたい。 } } function fb(objb){ if(confirm())window.location="a.html" else{inp.value=0//↑がvoiv(0)によって無効で動作しない。 } } </script> <a href=a.html>りんく</a><a href=javascript:voiv(0) onClick=inp.value=0>ばりゅ</a> <br>↑と同じようなことを1つのaタグでやりたい<br> <a href="" onClick=fa(this)>失敗A</a><br> <a href=javascript:voiv(0) onClick=fb(this)>失敗B</a><br> <input id=inp> 選択によってクリックのアクションを変更したいんだけど、 1方のアクションはリンク、もう1方はJavaScriptです。 ボタンとかならできるんだけど、クリック済みかを 色分けしたいからaタグでやりたいんです。 よい方法を教えてください。

  • A__
  • お礼率59% (194/328)

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

  • ベストアンサー
noname#3852
noname#3852
回答No.1

こんにちは。 問いの内容が掴みづらいですが、確認します。 「選択」とは、ダイアログで「OK」を選択したのか「キャンセル」を選択したのかという意味でよいですか。  A__さんが添付したソースを注意深くみれば、そうだと思いますが、言われた瞬間では、「選択」というとラジオボタン(<input type="radio">)やプルダウンメニュー(<select>)の方が連想しやすいので。 で、どちらを押したかによって、ページをジャンプするか、ジャンプしないでJavaScriptを実行するか分岐するでいいのですか。そうであれば以下のサンプルはいかがでしょうか。 <html> <head> <script language="JavaScript"> function func() {   if(confirm("OKWEBに行きますか?"))   {      return true ;   }   var txt = document.formForJS.textForJS;   txt.value="行きたくありません";   return false ; } </script> </head> <body>   <a href="http://www.okweb.ne.jp/" onclick="return func()">リンク</a>   <form name="formForJS">     <input type="text" name="textForJS" size="20" />   </form> </body> </html> ここでのポイントは、<a>タグのonclickにreturnをつけていること、あわせて、呼んでいる関数でtrue/falseを戻している(returnしている)ことです。 <a>タグのonclickがある場合、trueが戻ってきた場合は、本来のhrefで指定したURLにジャンプします。逆にfalseが戻ってきた場合は、ジャンプせず現在表示しているページのままでいます。 よって、関数内ではダイアログで「OK」が押されたらtrueを戻して終了、リンクジャンプさせます。一方、「キャンセル」が押されたらお好みのJavaScriptプログラムを起動させ、最後にfalseを戻して、ジャンプさせないようにします。

A__
質問者

お礼

onclickにreturnをつければよかったんですね。 hrefを無効にできました。 ありがとうございます。

関連するQ&A

  • セレクトボックスで選択した内容をテキストボックスへ

    こんにちは、初めて質問させて頂きます。 現在、下記のような形式で、選んだテキストをテキストボックスに追加する仕様を使っています。 これをテキストではなく、プルダウン形式のセレクトボックスで選択できるようにはできないでしょうか? <A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='鉄 '">鉄</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='アルミ '">アルミ</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='塩ビ '">塩ビ</A><BR> <FORM name="myform"> <INPUT TYPE="TEXT" NAME="comment" SIZE="50"> </form> お手数ですが、もし宜しければお知恵をお貸し下さい。

  • クリック→テキストボックスに追加

    下記は、クリックすると、テキストボックスの文字が入れ代わります。こうでなく、「どれどれそれからどうした」と追加していくようにするにはどうしたらよいでしょうか? <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='どれどれ'">どれどれ</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='それから'">それから</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='どうした'">どうした</A><BR> <FORM name="myform"> <INPUT TYPE="TEXT" NAME="bun" SIZE="50"> </form>

  • Aタグでサブミットさせない方法

    以下のようにjavascriptでサブミットを制御したい場合、 return falseとしてもサブミットしてしまいます。 Aタグにおいてサブミットさせないためには どうすればよいのでしょうか。よろしくお願いします。 <a href="xxx/yyy" onclick="func();"> function func(){ var ret = confirm("xxxxxxxxx"); if(ret == false) { return false; } }

  • POSTで<a hrefを送る方法について

    POSTで <a href=sample.cgi?md=aa&tx=zz~>hoge</a> <a href=sample.cgi?md=bb&tx=yy~>hoge2</a> <a href=sample.cgi?md=cc&tx=xx~>hoge3</a> <a href=sample.cgi?md=dd&tx=ww~>hoge4</a> を送る方法でjavascriptとの組み合わせで出来るのかな? と思い検索したら <form action="./sample.cgi" method="POST" name="post"> <input type="hidden" name="md" value="aa"> <input type="hidden" name="tx" value="zz">           : <a href='#' onClick="document.post.submit();return false">hoge</a> <form action="./sample.cgi" method="POST" name="post2"> <input type="hidden" name="md" value="bb"> <input type="hidden" name="tx" value="yy">           : <a href='#' onClick="document.post2.submit();return false">hoge2</a> このような手法が見つかりました これだと行数が多くなり、なんとなくすっきりしません どなたかいい解決方法を教えてください よろしくお願いします

    • ベストアンサー
    • HTML
  • <a href="#" …>の意味を教えてください。

    Javascriptを見ていると <a href="#" onClick="new_open();return false"> なる記述がありますが、 この<a href="#" の部分の意味を教えてください。 <a herf まではわかるのですが、この#はどのようないみなのでしょうか?

    • ベストアンサー
    • HTML
  • onbeforeunload と aタグの href 属性について

    <body onbeforeunload="alert('quit');"> <a href="#" onclick="foo();">教えて!</a> <a href="javascript:foo();">goo</a><br> ↑このように書くと、 「教えて!」をクリックすると、foo()関数のみが実行されますが、 「goo」をクリックすると onbeforeunload のイベントが発生し、alert実行後foo()関数が実行されます。 href に記述した javascript についての詳しい処理内容についてご存知の方がいましたら教えてください。 クリックしたときのこの二つの違いってなんなのでしょうか??

  • location href=""

    お世話になります 動作確認をしていてたのですが教えてください <script language="javascript"> <!-- function change(){ location.href="test1.html"; } /--> </script> <input type="button" value="送信" onclick="change()"> IE,Opera,Firefoxで試したのですが、Firefoxではページが切り替わりませんでした 何故でしょう?

  • <a href="#z" onclick="">

    によって onclickの動作をさせた後 <a name="z"></a>へのジャンプをさせようとしたのですが onclickの動作だけがおこなわれジャンプ動作をしません onclickで非表示の内容を表示させその表示された部分の特定の場所 にジャンプさせたいのです 何かいい方法はあるでしょうか? よろしくお願いします <a href="#z" onclick="document.getElementById('x').style.display='block';return false"> go to 99 </a> <br/> <br/> <div id="x" style="display:none"> 1<br/> 2<br/> ............. 99<br/> <a name="z"></a> </div>

  • javscriptでa hrefの方法でhidden情報を仕込む方法

    javascriptでa hrefタグを使いhidden情報を仕込ませる方法を教えてください。 <html><head> <script language="javascript"> <!-- function FncNextPage(page){ document.validform.action=page; document.validform.submit; } --> </script></head> <body> ~中略~ <form name="validform" method="post"> <a href="javascript:FncNextPage('abc10.asp??item_CD=<%= item_CD %>')"><%= item_CD %></a> <input type="hidden" name="use_flag" id="use_flag" value="<%=use_flag%>"> </form> このようにして、abc.aspにuse_flagを引継ぐ方法は出来ないでしょうか? よろしくおねがいします。

  • クリック→レイヤー→インプット?

    下記のようなことができるシンプルなサンプルを探しています。 <A HREF="javascript:function voi(){};voi()" onClick="hogehoge()">クリック</A> <INPUT TYPE="TEXT" NAME="都市名" SIZE="12"> 上記の「クリック」をクリックすると、windowではなくレイヤー画面が見え、そこに <A HREF="javascript:function voi(){};voi()" onClick="input()">東京</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="input()">大阪</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="input()">京都</A><BR> という内容が表示され、クリックすると、「都市名」のテキストボックスに入る。レイヤーは消える。 クリックするとテキストが入るなどの部分は、私でもできますが、レイヤーをどう表示するかという部分がちんぷんかんぷん。 #レイヤーの説明もちょっとあやしいかもしれません。

専門家に質問してみよう