CSSを使用してリンクを無効にする方法はありますか？

呼び出されたクラスがcurrent-pageあり、このクラスへのリンクを無効にして、クリックしてもアクションが発生しないようにしたい。

答えはすでに質問のコメントにあります。より見やすくするために、私はこのソリューションをここにコピーしています：

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" class="not-active">Link</a>

ブラウザのサポートについては、https：//caniuse.com/#feat=pointer-eventsを参照してください。IEをサポートする必要がある場合は、回避策があります。この答えを見てください。

警告：pointer-events非SVG要素のCSSでの使用は実験的なものです。この機能は、CSS3 UIドラフト仕様の一部でしたが、多くの未解決の問題により、CSS4に延期されました。

CSSは、何かのスタイルを変更するためにのみ使用できます。おそらく純粋なCSSでできる最善の方法は、リンクを完全に隠すことです。

あなたが本当に必要なのはいくつかのJavaScriptです。ここでは、jQueryライブラリを使用して必要な操作を行う方法を示します。

$('a.current-page').click(function() { return false; });

CSSはそれを行うことができません。CSSはプレゼンテーション専用です。オプションは次のとおりです。

• タグにhref属性を含めないでください<a>。
• JavaScriptを使用して、を含むアンカー要素を見つけ、それに応じclassてhrefまたはonclick属性を削除します。jQueryはそれを支援します（NickFは、似ているがより良い方法を行う方法を示しました）。

ブートストラップ無効リンク

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

ブートストラップ無効ボタンですが、リンクのように見えます

<button type="button" class="btn btn-link">Link</button>

href属性を次のように設定できますjavascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

私が使用した：

.current-page a:hover {
pointer-events: none !important;
}

そして十分ではなかった。一部のブラウザでは、リンクがまだ点滅して表示されていました。

追加する必要がありました：

.current-page a {
cursor: text !important;
}

フォームでHTML / CSSのみを使用する場合は、ボタンを使用することもできます。スタイルを設定し、disabled属性を設定します。

例：http : //jsfiddle.net/cFTxH/1/

CSSのみにする場合は、無効化ロジックをCSSで定義する必要があります。

CSS定義のロジックを移動するには、属性セレクターを使用する必要があります。ここではいくつかの例を示します ：

正確なhrefを持つリンクを無効にします。 =

次のように特定のhref値を含むリンクを無効にすることを選択できます。

<a href="//website.com/exact/path">Exact path</a>

[href="https://stackoverflow.com//website.com/exact/path"]{
  pointer-events: none;
}

パスの一部を含むリンクを無効にします。 *=

ここでは、/keyword/パスに含まれているリンクは無効になります

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

次で始まるリンクを無効にします。 ^=

[attribute^=value]オペレータの目標、特定の値で始まる属性。Webサイトとルートパスを破棄できます。

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

これを使用して、https以外のリンクを無効にすることもできます。例えば ​​：

a:not([href^="https://"]){
  pointer-events: none;
}

次で終わるリンクを無効にします。 $=

[attribute$=value]オペレータは、特定の値で終わる、その属性をターゲットにしています。ファイル拡張子を破棄すると便利です。

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

または他の属性

CSSは任意のHTML属性をターゲットにできます。可能性がありrel、target、data-customようにと...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

属性セレクターの組み合わせ

複数のルールを連鎖させることができます。すべての外部リンクを無効にしたいが、ウェブサイトを指しているリンクは無効にしたいとしましょう：

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

または、特定のWebサイトのPDFファイルへのリンクを無効にします。

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

ブラウザのサポート

属性セレクターはIE7以降でサポートされています。:not()IE9以降のセレクタ。

CSSを使用してこれを実行できる1つの方法は、CSSをラッピングに設定して、非表示にするように設定し、div他の何かがそれを実行することです。

例えば：

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

のようなCSSで

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

実際にをオフにaするにはhref、クリックイベントまたはを置き換える必要があります。

PS：明確にするために、これはかなり整然としたソリューションだと思います。SEOにとっても、それは最良ではありませんが、純粋にCSSを使用するのが最良だと思います。

これを試して：

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

ポインタ・イベントの CSSホバー/アクティブ状態、JavaScriptでクリック/タップイベント、カーソルが表示されているかどうかを含めて-プロパティは、マウス/タッチイベントにどのようにHTML要素の応答を制御することができます。

これがLinkを無効にする唯一の方法ではありませんが、IE10 +とすべての新しいブラウザーで機能する適切なCSSの方法です。

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

インターネットで検索したところ、これ以上のものはありませんでした。基本的にボタンクリック機能を無効にするには、次のようにjQueryを使用してCSSスタイルを追加します。

$("#myLink").css({ 'pointer-events': 'none' });

次に、それを再び有効にするには、これを実行します

$("#myLink").css({ 'pointer-events': '' });

FirefoxとIE 11で確認したところ、うまくいきました。

あなたはこのCSSを使うことができます：

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}

<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

ソリューションを投稿してくださった皆さんに感謝し、複数のアプローチを組み合わせて、より高度なdisabled機能をいくつか提供しました。 ここに要点があります、そしてコードは以下です。

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

これがcoffescriptクラスです：

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

リンクをカバーするように別の要素のサイズを変更することもできます（右のz-indexを使用）。これにより、クリックが「食べられます」。

（ブラウザーウィンドウがモバイルサイズの場合、「レスポンシブ」設計によりH2がリンクをカバーするため、突然非アクティブになったリンクに問題があったため、これを偶然発見しました。）

デモはこちら
これをお試しください

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

別のトリックは、その上に非表示の要素を配置することです。これにより、ホバー効果も無効になります

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}

CSSでそれを行うことが可能です

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

で参照してください：

text-decoration: none;とcolor: black;は必要ありませんが、リンクがプレーンテキストのように見えることに注意してください。

pointer-events:none リンクを無効にします：

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>