CSS kullanarak bir bağlantıyı devre dışı bırakmanın herhangi bir yolu var mı?

Denilen bir sınıf var current-pageve tıklatıldığında hiçbir eylem oluşmaması için bu sınıfla bağlantıların devre dışı bırakılmasını istiyorum.

Cevap zaten sorunun yorumlarında. Daha fazla görünürlük için bu çözümü buraya kopyalıyorum :

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

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

Tarayıcı desteği için lütfen https://caniuse.com/#feat=pointer-events adresine bakın . IE'yi desteklemeniz gerekiyorsa bir geçici çözüm vardır; bu cevaba bakınız .

Uyarı: pointer-eventsSVG olmayan elemanlar için CSS'de kullanım deneyseldir. Bu özellik eskiden CSS3 UI taslak şartnamesinin bir parçasıydı, ancak birçok açık sorun nedeniyle CSS4'e ertelendi.

CSS yalnızca bir şeyin stilini değiştirmek için kullanılabilir. Saf CSS ile yapabileceğiniz en iyi şey, bağlantıyı tamamen gizlemektir.

Gerçekten ihtiyacınız olan bazı javascript. JQuery kitaplığını kullanarak istediğinizi nasıl yapacağınız aşağıda açıklanmıştır.

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

CSS bunu yapamaz. CSS yalnızca sunum içindir. Seçenekleriniz:

• Dahil etmeyin hrefo niteliği senin<a> etiketlerinize .
• Bununla bağlantı elemanları bulmak için JavaScript'i kullanın classve uygun şekilde hrefveya onclicközelliklerini kaldırın . jQuery bu konuda size yardımcı olacaktır (NickF benzer ama daha iyi bir şeylerin nasıl yapıldığını gösterdi).

Önyükleme Devre Dışı Bağlantı

<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>

Bootstrap Devre Dışı Düğmesi ancak bağlantıya benziyor

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

İçin hreföznitelik ayarlayabilirsinizjavascript:void(0)

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

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

Kullandım:

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

Ve yeterli değildi; bazı tarayıcılarda bağlantı yanıp sönmeye devam ediyordu.

Eklemek zorunda kaldım:

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

Bir formda yalnızca HTML / CSS'ye bağlı kalmak istiyorsanız, başka bir seçenek bir düğme kullanmaktır. Stil verin ve özelliği ayarlayın disabled.

Örneğin, http://jsfiddle.net/cFTxH/1/

Yalnızca CSS olmasını istiyorsanız, devre dışı bırakma mantığı CSS tarafından tanımlanmalıdır.

CSS tanımlarındaki mantığı taşımak için özellik seçicileri kullanmanız gerekir. İşte bazı örnekler:

Tam bir href içeren bağlantıyı devre dışı bırak: =

Aşağıdaki gibi belirli bir href değeri içeren bağlantıları devre dışı bırakmayı seçebilirsiniz:

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

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

Bir yol parçası içeren bir bağlantıyı devre dışı bırakın: *=

Burada, /keyword/yolu içeren tüm bağlantılar devre dışı bırakılacak

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

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

Şununla başlayan bir bağlantıyı devre dışı bırak: ^=

[attribute^=value]Operatör hedef belirli değerle başlayan bir özellik. Web sitelerini ve kök yollarını silmenizi sağlar.

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

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

Https dışı bağlantıları devre dışı bırakmak için bile kullanabilirsiniz. Örneğin :

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

Şununla biten bir bağlantıyı devre dışı bırakın: $=

[attribute$=value]Operatör bir öznitelik hedef özel bir değere sahip uçları söyledi. Dosya uzantılarını silmek yararlı olabilir.

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

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

Veya başka bir özellik

Css herhangi bir HTML özelliğini hedefleyebilir. Olabilir rel, target, data-customvb ve ...

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

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

Özellik seçicileri birleştirme

Birden çok kuralı zincirleyebilirsiniz. Diyelim ki her harici bağlantıyı devre dışı bırakmak istiyorsunuz, ancak web sitenizi işaret eden bağlantıları devre dışı bırakmak istiyorsunuz:

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

Veya belirli bir web sitesinin pdf dosyalarına olan bağlantıları devre dışı bırakın:

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

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

Tarayıcı desteği

Nitelik seçicileri IE7'den beri desteklenmektedir. :not()IE9'dan beri seçici.

Bunu CSS ile yapmanın bir yolu, bir sargıya CSS ayarlamak olacaktır div kaybolmak ayarlamak olacaktır ve başka bir şey gerçekleşir.

Örneğin:

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

CSS benzeri bir

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

Aslında kapatmak aiçin tıklama etkinliğini değiştirmeniz veyahref başkaları tarafından açıklandığı gibi .

PS: Sadece bunu oldukça düzensiz bir çözüm olarak düşünürüm ve SEO için de en iyisi değil, ama tamamen CSS ile en iyisi olduğuna inanıyorum.

Bunu dene:

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

İşaretçi-olaylar mülkiyet üzerinde kontrol sağlayacağı nasıl fareye HTML öğelerini tepki / dokunmatik olayları - CSS vurgulu / aktif devletler, tıklama / JavaScript musluk olayları ve imleç görünür olup olmadığını da dahil.

Bir Bağlantıyı devre dışı bırakmanın tek yolu bu değil , IE10 + ve tüm yeni tarayıcılarda çalışan iyi bir CSS yolu:

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

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

İnterneti aradık ve hiçbir daha iyi buldum bu . Temelde düğme tıklama işlevini devre dışı bırakmak için jQuery kullanarak CSS stili ekleyin:

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

Sonra tekrar etkinleştirmek için bunu yapın

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

Firefox ve IE 11'de kontrol edildi, işe yaradı.

bu css kullanabilirsiniz:

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>

Çözüm gönderen herkes sayesinde, daha gelişmiş disabledişlevsellik sağlamak için çoklu yaklaşımları birleştirdim . İşte bir öz ve kod aşağıda.

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()

İşte coffescript sınıfı:

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

Ayrıca bağlantıları (sağ z-endeksini kullanarak) kapsayacak şekilde başka bir öğeyi boyutlandırabilirsiniz: Bu, tıklamaları "yiyecektir".

(Bunu yanlışlıkla keşfettik çünkü tarayıcı penceresi mobil boyutundayken H2'nin onları kaplamasına neden olan "duyarlı" tasarım nedeniyle aniden etkin olmayan bağlantılarla ilgili bir sorun yaşadık.)

Burada demo
Bunu deneyin

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

Başka bir numara, üzerine görünmez bir unsur yerleştirmektir. Bu, fareyle üzerine gelme efektlerini de devre dışı bırakır

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

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

CSS ile yapmak mümkün

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

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

Şuraya bakın:

text-decoration: none;Ve color: black;öğesinin gerekli olmadığını unutmayın, ancak bağlantının düz metin gibi görünmesini sağlar.

pointer-events:none bağlantıyı devre dışı bırakacak:

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