ラベルとボタンを削除し、背景画像の点線/影を追加すると完璧な解決策になります

ユーザーが登録すると、ラベルをクリックして確認コードを変更します。クリックするとラベルに影の部分ができます。しかし、美学を好む学生にとってこれは耐え難いことです!

完美去掉a標簽和按鈕加背景圖片陰影

その理由は何でしょうか?結局、a タグの href 属性が原因であることが分かりました。

1. タグだけ

私が知っている解決策は 2 つあります。

まず、病気に適した薬を処方します。それはhrefによって引き起こされるので。次にhref属性を削除します

href=javascript:RefreshCode(); を使用すると、検証コードが更新されます。ページジャンプはありません。

コードをコピー

コードは次のとおりです。

<ahref="javascript:RefreshCode();"class="yellow">はっきりと見えませんか?画像を変更</a>

したがって、href を削除し、a タグに onclick イベントを追加して、更新検証コード関数を呼び出すことができます。

コードをコピー

コードは次のとおりです。

<aonclick="RefreshCode()"class="yellow">よく見えませんか?画像を変更</a>

2番目: 一歩下がってみてください。相違点を残しつつ共通点を探します。 href属性を使用したいためです。よし。次に、別のイベントを追加します: onfocus

これを変更するだけで、a タグに onfocus="this.blur()" を追加することで完全に削除できます。

確かに。 a タグに下線を付けたくない場合。次に: style="text-decoration: none"

コードをコピー

コードは次のとおりです。

<a href="javascript:RefreshCode();"class="yellow"onfocus="this.blur()">はっきりと見えませんか?画像を変更</a>

変更後の効果

完美去掉a標簽和按鈕加背景圖片陰影

FF や他のブラウザでは、比較的簡単です。タグ a にスタイル outline:none を定義するだけです。つまり、次のようになります。

コードをコピー

コードは次のとおりです。

a{ アウトライン:なし; }

もちろん、これは 1 つだけを削除するだけです。ページに複数の a タグがある場合、onfocus イベントを 1 つずつ追加するべきではないでしょうか?

もちろん違います。ページが読み込まれたときにこれを実行できます。 window.document.links.length を通じてページ上のすべての a タグを取得します (ここでは window を省略できます)。次に、登録されたイベントを反復処理します。

コードをコピー

コードは次のとおりです。

<scripttype="text/javascript">
window.onload = 関数(){
for(var i=0; i<document.links.length; i++)
document.links[i].onfocus=function(){this.blur()}
}
</スクリプト>

2. ボタンに背景画像を追加します。

ボタンに背景画像を追加する場合も同様です。影が出てきます。

完美去掉a標簽和按鈕加背景圖片陰影

同じアプローチで、

コードをコピー

コードは次のとおりです。

<asp:Button ID="imgBtnReg" runat="server"onfocus="this.blur()" OnClientClick="return chk_reg();"OnClick="imgBtnReg_Click" Text="送信の確認"/>
<input type="submit"id="btnReg" value="登録" name="regist" onfocus="this.blur()"onclick="return checkAll()" style="background-image:url('image/btn.jpg')"/>

変更後の効果:

完美去掉a標簽和按鈕加背景圖片陰影

3. imgにaタグを追加する場合は、aタグにonfocusを追加し、imgのborder属性を設定します: border=0

コードをコピー

コードは次のとおりです。

ページにタグが両方ある場合。またボタンがあります。関数にラップすることができます

コードをコピー

コードは次のとおりです。

関数 fHideFocus(tName){
タグ=document.getElementsByTagName_r(tName);
i=0;i<aTag.length;i++)aTag.hideFocus=true; の場合
//for(i=0;i<aTag.length;i++)aTag.onfocus=function(){this.blur();};
}

現在、hidefocus 属性が追加されており、その値は、hideFocus=true などのブール値です。割り当てを省略して、直接hideFocusを使用することもできます。

コードに hideFocus がない場合、マウスでハイパーリンクをクリックすると、フォーカスを示す点線のボックスが外側に表示されます。 hideFocus を使用すると、点線の枠は表示されません。

コメントアウトされた文は、同じ効果を持つ onfucus = this.blur(); を追加するものです。
次に、fHideFocus("A"); を呼び出して、a の点線枠を削除します。異なるパラメータを渡すことで、異なる点線枠を削除できます。たとえば、"BUTTON" はボタンの点線枠を削除できますが、パラメータは大文字にする必要があることに注意してください。

拡張機能:

A. マップ領域内のリンクの点線を削除するにはどうすればよいですか?

これは概念的な誤りです。実際には、エリアではなく地図画像上で制御する必要があります。従来の方法を参照してください

B. onFocusについて

コードをコピー

コードは次のとおりです。

このうち、onfocus はマウスのフォーカスイベントを設定するために使用されます。これは使用してもしなくてもかまいません。ただし、より多くのブラウザで認識できるようにするには、border=0 を使用することをお勧めします。これが点線枠を消す鍵です (インターネットでは、onfocus="this.blur()" を使用して点線枠を消す人がほとんどですが、この文だけでは消せない場合もあります)

専門家にとって、その知識ポイントはすでにかなり時代遅れになっています。しかし、それに触れたばかりの友人にとっては、タイムリーな救済であり、私は今日たまたまそれに遭遇したのです。それでここに記録されます。知識は少しずつ蓄積されなければなりません。

<<: 新しい ECMAscript オブジェクト機能の紹介

>>: CSS フォント、テキスト、リストのプロパティの詳細な紹介