Devre dışı bırakılmış href etiketi

Bu bağlantı devre dışı olmasına rağmen yine de tıklanabilir.

<a href="/" disabled="disabled">123n</a>

Devre dışı bırakılmışsa tıklanamaz hale getirebilir miyim? JavaScript'i mutlaka kullanmalı mıyım?

Köprüler için devre dışı bırakılmış bir özellik yoktur. Bir şeyin bağlanmasını istemiyorsanız <a>etiketi tamamen kaldırmanız veya hrefniteliğini kaldırmanız gerekir .

Css yardımıyla köprüyü devre dışı bırakacaksınız. Aşağıdakini deneyin

a.disabled {
  pointer-events: none;
  cursor: default;
}

<a href="link.html" class="disabled">Link</a>

Kullanabilirsiniz:

<a href="/" onclick="return false;">123n</a>

Aşağıdaki çözümlerden birini kullanabilirsiniz:

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>

Bunu dene:

<a href="javascript:void(0)" style="cursor: default;">123n</a>

<a>Etiketi bir yok disabledsadece içindir niteliğini, <input>s (ve <select>s ve<textarea> s).

Bir bağlantıyı "devre dışı bırakmak" için, hrefözniteliğini kaldırabilir veya false döndüren bir tıklama işleyicisi ekleyebilirsiniz.

Kaldırmanız gerekir <a> kurtulmak etiketi .

veya kullanmayı deneyin: -

  <a href="/" onclick="return false;">123n</a>

HTML:

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS:

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

İpuçları 1: CSS Kullanımı pointer-events: none;

İpuçları 2: JavaScript Kullanma javascript:void(0) (Bu en iyi yöntemdir)

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

İpuçları 1: Jquery kullanma $('selector').attr("disabled","disabled");

Yalnızca CSS: Bu bağlantıyı href.

.disable { 
    pointer-events: none; 
    cursor: default; 
}

Bir ebeveyne sahip olmak pointer-events: noneçocuğu şu şekilde devre dışı bırakır a-tag(div'in a'yı kaplamasını ve 0 genişlik / yüksekliğe sahip olmamasını gerektirir):

<div class="disabled">
   <a href="/"></a>
</div>

nerede:

.disabled {
    pointer-events: none;
}

$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

bu kodu kullanarak bağlantıyı çalışma zamanında javascript kullanarak devre dışı bırakabilirsiniz

$ ('. sayfa bağlantısı'). css ("pointer-events", "none");

İşaretçiden kurtulmak istiyorsanız bunu imleç kullanarak css ile yapabilirsiniz .

Bir <a>etikette devre dışı bırakılmış özelliği taklit edebilirsiniz .

<a href="link.html" disabled="">Link</a>

a[disabled] {
   pointer-events: none;
   cursor: default;
}

Benim durumumda kullanıyorum

<a href="/" onClick={e => e.preventDefault()}>

Bende bir tane var:

<a href="#">This is a disabled tag.</a>

Size yardımcı olacağını umuyoruz;)

Doğrudan devre dışı bırakamayız ancak aşağıdakileri yapabiliriz

1. Ekle type="button" .
2. kaldır href=""özniteliği .
3. disabledözniteliği ekleyin , böylece kodlayıcıyı değiştirerek devre dışı bırakıldığını ve soluklaştığını gösterin.

Aşağıdaki bir örnek

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

Bir ng-href üçlü işlemi kullanarak istenen sonucu elde edebildim

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

nerede

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

Düğmeleri ve bağlantıları doğru kullanın.

• Düğmeler bir web sayfasındaki komut dosyası işlevselliğini etkinleştirir (iletişim kutuları, bölgeleri genişlet / daralt).

• Bağlantılar sizi farklı bir sayfaya veya aynı sayfadaki farklı bir konuma götürür.

Bu kurallara uyarsanız, bir bağlantıyı devre dışı bırakmanız gerektiğinde hiçbir senaryo olmayacaktır. Bir bağlantı görsel olarak devre dışı ve boş görünüyor olsa bile

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

Erişilebilirliği düşünmeyeceksiniz ve ekran okuyucuları bunu bir bağlantı olarak okuyacak ve görme engelli insanlar bağlantının neden çalışmadığını merak etmeye devam edecektir.

WordPress kullanıyorsanız, bir şeyi nasıl kodlayacağınızı bilmenize gerek kalmadan bunu ve çok daha fazlasını yapabilen bir eklenti oluşturdum. Tek yapmanız gereken, devre dışı bırakmak istediğiniz bağlantıların seçicisini eklemek ve ardından "Bu seçiciyle tüm bağlantıları yeni bir sekmede devre dışı bırak" ı seçmek. görüntülenen açılır menüden güncelle'yi tıklayın.

Bunu gösteren bir gif görmek için buraya tıklayın

Sen edebilirsiniz WordPress.org Eklenti deposundan ücretsiz sürümünü almak denemek için.

Bir etiketi devre dışı bırakmanın çeşitli yolları şunlardır:

<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

Bağlantı etiketi için devre dışı bırakılmış özellik olmadığından. Bir jQuery işlevi içindeki bağlantı etiketi davranışını durdurmak istiyorsanız, işlevin başlangıcında aşağıdaki satırı kullanabilirsiniz:

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault ()

Görüyorum ki, zaten burada bir ton cevap var, ama daha önce bahsettiğim yaklaşımları çalışmayı bulduğum yaklaşımla birleştiren net bir cevap olduğunu düşünmüyorum. Bu, bağlantının hem devre dışı görünmesini sağlamak hem de kullanıcıyı başka bir sayfaya yönlendirmemektir.

Bu yanıt , jquery ve bootstrap kullandığınızı varsayar ve hrefdevre dışı bırakıldığında özelliği geçici olarak saklamak için başka bir özellik kullanır .

//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;
}

Bir şey var href etiketindeki fareyle üzerine geldiğinizde tarayıcı penceresinin sol alt tarafında görüntülenir.

Şahsen javascript gibi bir şey olması düşünüyorum : void (0) kullanıcıya görüntülenen bir .

Bunun yerine, href'i bırakın, sihrinizi jQuery / başka bir şeyle yapın ve bir stil kuralı ekleyin (yine de bir bağlantı gibi görünmesi gerekiyorsa):

a {
    cursor:pointer;
}

En iyi cevap her zaman en basit olanıdır. Kodlamaya gerek yok.

(A) bağlantı etiketinde href özelliği yoksa, bu yalnızca bir köprü için yer tutucudur. Tüm tarayıcılar tarafından desteklenir!

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

Bağlantı etiketlerini false döndürerek devre dışı bırakabilirsiniz. Benim durumumda bir Jquery akordeon için açısal ve ng devre dışı kullanıyorum ve bölümleri devre dışı bırakmam gerekiyor.

Bu yüzden bunu düzeltmek için küçük bir jip snippet'i oluşturdum.

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

sadece bağlantıyı geçici olarak devre dışı bırakmak, ancak daha sonra etkinleştirmek için href'i orada bırakmak istiyorsanız (bu yapmak istediğim şey) tüm tarayıcıların ilk href'i kullandığını gördüm. Böylece yapabildim:

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

Bana uygun varyant:

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

<a href="/" disabled="true" onclick="return false">123</a>

Sadece ekleyerek: Bu genel olarak çalışır, ancak kullanıcı tarayıcıda javascript'i devre dışı bıraktıysa çalışmaz.

1) İsteğe bağlı olarak, href etiketini devre dışı bırakmak için önyükleme etiketinizde Bootstrap 3 sınıfını kullanabilirsiniz, bootstrap 3 eklentisini entegre ettikten sonra

<a href="/" class="btn btn-primary disabled">123n</a>

Veya

2) Tarayıcılarda html veya js kullanarak javascript'i nasıl etkinleştireceğinizi öğrenin. veya kullanıcıya web sitesini kullanmadan önce javascript'i etkinleştirmesini söyleyen bir açılır pencere oluşturun