そのリンクは無効になっていますが、クリック可能です。
<a href="/" disabled="disabled">123n</a>
無効になっている場合、クリックできないようにすることはできますか？必然的にJavaScriptを使用する必要がありますか？
901009 次
33 に答える
459
cssの助けを借りて、ハイパーリンクを無効にします。以下をお試しください
a.disabled {
pointer-events: none;
cursor: default;
}<a href="link.html" class="disabled">Link</a>于 2014-11-21T09:07:09.680 に答える
288
ハイパーリンクの無効な属性はありません。リンクしたくない場合は、<a>タグを完全に削除する必要があります。
または、その属性を削除することもできます。hrefただし、以下のコメントに記載されているように、これには他のUXとアクセシビリティの問題があるため、お勧めしません。
于 2012-12-19T15:30:30.507 に答える
93
次を使用できます。
<a href="/" onclick="return false;">123n</a>
于 2012-12-19T15:31:10.920 に答える
80
次のいずれかのソリューションを使用できます。
HTML
<a>link</a>
JavaScript
<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>
CSS
<a href="www.page.com" disabled="disabled">link</a>
<style type="text/css">
a[disabled="disabled"] {
pointer-events: none;
}
</style>
于 2014-10-08T15:05:02.877 に答える
40
これを試して：
<a href="javascript:void(0)" style="cursor: default;">123n</a>
于 2012-12-19T15:32:37.993 に答える
21
<a>タグdisabledには属性がありません。これは<input>s（および<select>sと<textarea>s）専用です。
リンクを「無効」にするには、そのhref属性を削除するか、falseを返すクリックハンドラーを追加します。
于 2012-12-19T15:31:30.033 に答える
19
HTML：
<a href="/" class="btn-disabled" disabled="disabled">123n</a>
CSS：
.btn-disabled,
.btn-disabled[disabled] {
opacity: .4;
cursor: default !important;
pointer-events: none;
}
于 2016-01-26T10:32:24.057 に答える
16
ヒント1：CSSを使用する pointer-events: none;
ヒント2：JavaScript javascript:void(0)の使用
（これはベストプラクティスです）
<a href="javascript:void(0)"></a>
ヒント1：Jqueryを使用する $('selector').attr("disabled","disabled");
于 2019-03-08T09:15:56.633 に答える
14
<a>これを取り除くには、タグを削除する必要があります。
または使用してみてください：-
<a href="/" onclick="return false;">123n</a>
于 2012-12-19T15:31:13.050 に答える
13
CSSのみ：これにより、からリンクが削除されhrefます。
.disable {
pointer-events: none;
cursor: default;
}
于 2019-12-12T17:42:05.527 に答える
6
親に持たせると、次のようpointer-events: noneに子が無効になりa-tagます（divがaをカバーし、幅/高さが0でない必要があります）。
<div class="disabled">
<a href="/"></a>
</div>
どこ：
.disabled {
pointer-events: none;
}
于 2017-06-14T18:46:00.863 に答える
5
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
});
});
于 2012-12-19T15:32:32.880 に答える
5
タグのdisabled属性をエミュレートできます<a>。
<a href="link.html" disabled="">Link</a>
a[disabled] {
pointer-events: none;
cursor: default;
}
于 2017-08-15T09:20:43.750 に答える
4
このコードを使用すると、実行時にjavascriptを使用してリンクを無効にできます
$（'。page-link'）。css（ "pointer-events"、 "none"）;
于 2018-05-22T13:29:33.733 に答える
4
私は1つを持っている：
<a href="#">This is a disabled tag.</a>
それがあなたを助けることを願っています;）
于 2020-01-24T20:32:53.343 に答える
3
ポインタを削除したい場合は、カーソルを使用してcssでこれを行うことができます。
于 2012-12-19T15:33:38.900 に答える
3
私の場合、
<a href="/" onClick={e => e.preventDefault()}>
于 2017-09-11T08:34:51.147 に答える
3
直接無効にすることはできませんが、次のことを行うことができます。
- 追加し
type="button"ます。 - 属性を削除し
href=""ます。 - 属性を追加
disabledして、カーソルを変更すると無効になり、淡色表示になるようにします。
PHPの例：
<?php
if($status=="Approved"){
?>
<a type="button" class="btn btn-primary btn-xs" disabled> EDIT
</a>
<?php
}else{
?>
<a href="index.php" class="btn btn-primary btn-xs"> EDIT
</a>
<?php
}
?>
于 2018-04-08T16:45:27.190 に答える
3
これを試してみてください
<a href="javascript:void(0)">Click Hare</a>
于 2020-09-09T12:12:51.730 に答える
3
于 2021-08-04T10:50:53.780 に答える
2
ng-hrefの三項演算を使用して目的の結果を達成することができました
<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>
どこ
a.is-disabled{
color: grey;
cursor: default;
&:hover {
text-decoration: none;
}
}
于 2019-09-20T12:46:09.533 に答える
2
最良の答えは常に最も単純です。コーディングの必要はありません。
（a）アンカータグにhref属性がない場合、それはハイパーリンクのプレースホルダーにすぎません。すべてのブラウザでサポートされています！
<a href="/">free web counters</a><br />
<a "/">free web counters</a>于 2020-05-24T00:56:57.633 に答える
1
ボタンとリンクを正しく使用してください。
•ボタンは、Webページのスクリプト機能（ダイアログ、展開/折りたたみ領域）をアクティブにします。
•リンクをクリックすると、別の場所、つまり別のページまたは同じページの別の場所に移動します。
これらのルールに従えば、リンクを無効にする必要があるシナリオはありません。リンクを視覚的に無効にして空白のonclickに見せても
<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"
あなたはアクセシビリティを考慮せず、スクリーンリーダーはそれをリンクとして読み、視覚障害者はなぜリンクが機能しないのか疑問に思うでしょう。
于 2018-02-07T06:00:11.193 に答える
1
WordPressを使用している場合は、コーディング方法を知らなくても、これを実行できるプラグインを作成しました。無効にするリンクのセレクターを追加し、[このセレクターを使用するすべてのリンクを新しいタブで無効にする]を選択するだけです。表示されるドロップダウンメニューから、[更新]をクリックします。
WordPress.orgプラグインリポジトリから無料バージョンを入手して試してみることができます。
于 2019-05-24T17:04:16.017 に答える
1
タグを無効にするさまざまな方法は次のとおりです。
<a >Link Text</a> remove the href from your anchor tag <a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href <a href="/" onclick="return false;">Link text</a> using return falseアンカータグには無効な属性がないため。jQuery関数内でアンカータグの動作を停止したい場合は、関数の先頭で次の行を使用できます。
$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});
于 2019-11-20T10:40:16.637 に答える
1
ここにはすでにたくさんの回答が掲載されているようですが、すでに述べたアプローチと私が見つけたアプローチを組み合わせた明確な回答はまだないと思います。これは、リンクが無効になっているように見せ、ユーザーを別のページにリダイレクトしないようにするためです。
この回答は、 jqueryとbootstrapを使用していることを前提としており、無効になっている間、別のプロパティを使用してプロパティを一時的に保存しhrefます。
//situation where link enable/disable should be toggled
function toggle_links(enable) {
if (enable) {
$('.toggle-link')
.removeClass('disabled')
.prop('href', $(this).attr('data-href'))
}
else {
$('.toggle-link')
.addClass('disabled')
.prop('data-href', $(this).prop('href'))
.prop('href','#')
}
a.disabled {
cursor: default;
}
于 2020-05-10T19:59:13.097 に答える
1
Javascriptを使用してlaravelのリンクを無効にする必要がある場合は、次の解決策があります。
リンク（blade.php）：
<a href='/link/to/path' class='btn btn-primary mt-3' onclick='disableLink(this)'>Confirmar</a>
.cssファイル
.isDisabled {
cursor: not-allowed;
opacity: 0.5;
}
a[aria-disabled="true"] {
color: currentColor;
display: inline-block; /* For IE11/ MS Edge bug */
pointer-events: none;
text-decoration: none;
}
.jsファイル
function disableLink(link) {
// 1. Add isDisabled class to parent element
link.parentElement.classList.add('isDisabled');
// 2. Store href so we can add it later
link.setAttribute('data-href', link.href);
// 3. Set aria-disabled to 'true'
link.setAttribute('aria-disabled', 'true');
}
function enableLink(link) {
// 1. Remove 'isDisabled' class from parent span
link.parentElement.classList.remove('isDisabled');
// 2. Set href
link.href = link.getAttribute('data-href');
// 3. Remove 'aria-disabled', better than setting to false
link.removeAttribute('aria-disabled');
}
于 2022-01-10T17:39:48.237 に答える
0
hrefタグにマウスを合わせると、ブラウザウィンドウの左下にすべてが表示されます 。
個人的には、javascript：void（0）のようなものをユーザーに表示するのは恐ろしいことだと思います。
代わりに、hrefをオフのままにし、jQueryなどを使用して魔法をかけ、スタイルルールを追加します（リンクのように見せるために必要な場合）。
a {
cursor:pointer;
}
于 2015-03-12T09:46:12.010 に答える
-1
私に合ったバリエーション：
<script>
function locker(){
if ($("a").hasClass("locked")) {
$("a").removeClass('locked').addClass('unlocked');
$("a").attr("onClick","return false");
} else {
$("a").css("onclick","true");
$("a").removeClass('unlocked').addClass('locked');
$("a").attr("onClick","");
}
}
</script>
<button onclick="locker()">unlock</button>
<a href="http://some.site.com" class="locked">
<div>
....
<div>
</a>
于 2014-03-16T14:13:39.157 に答える
-1
falseを返すことにより、アンカータグを無効にできます。私の場合、Jqueryアコーディオンにangularとng-disabledを使用しているので、セクションを無効にする必要があります。
そこで、これを修正するために小さなjsスニペットを作成しました。
<a class="opener" data-toggle="collapse"
data-parent="#shipping-detail"
id="shipping-detail-section"
href="#shipping-address"
aria-expanded="true"
ng-disabled="checkoutState.addressSec">
Shipping Address</a>
<script>
$("a.opener").on("click", function () {
var disabled = $(this).attr("disabled");
if (disabled === 'disabled') {
return false;
}
});
</script>
于 2016-11-01T15:46:09.573 に答える
-1
リンクを一時的に無効にし、後で有効にするためにhrefをそのままにしておく場合（これは私がやりたかったことです）、すべてのブラウザーが最初のhrefを使用していることがわかりました。したがって、私は次のことができました。
<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>
于 2017-11-25T00:15:37.557 に答える
-1
<a href="/" disabled="true" onclick="return false">123</a>追加するだけ：これは一般的に機能しますが、ユーザーがブラウザでjavascriptを無効にしている場合は機能しません。
1）bootstrap 3プラグインを統合した後、オプションでアンカータグでBootstrap 3クラスを使用して、hrefタグを無効にすることができます。
<a href="/" class="btn btn-primary disabled">123n</a>または
2）ブラウザでhtmlまたはjsを使用してJavaScriptを有効にする方法を学びます。または、Webサイトを使用する前にJavaScriptを有効にするようにユーザーに指示するポップアップを作成します
于 2018-03-31T15:31:43.247 に答える
-3
次のような簡単でクリーンな方法があります。
<a href="/shopcart/">
<button class="btn" disabled> Make an Order </button>
</a>
デフォルトで属性を無効<button>にすると、クリックが要素から<button>要素まで移動しなくなり<a>ます。したがって、<a>要素は、いくつかのクリックが発生したことさえ知りません。の無効な属性を追加/削除して操作します<button>。
于 2020-08-10T08:56:56.443 に答える