Nasıl HTML bağlantıları devre dışı bırakmak için | Netgez.com
SORU
23 NÄ°SAN 2012, PAZARTESÄ°


Nasıl HTML bağlantıları devre dışı bırakmak için

Düğmesini devre dışı bırakmak için var olan bir TD içinde bir link var. Bu IE üzerinde çalışıyor ama Firefox ve Chrome. Yapı - TD iç Link. TD içinde herhangi bir kapsayıcı (div/span gibi) eklemek edemem

Aşağıdaki denedim ama Firefox (1.4.2 js kullanarak) çalışmıyor:

$(td).children().each(function () {
        $(this).attr('disabled', 'disabled');
  });


  $(td).children().attr('disabled', 'disabled');

  $(td).children().attr('disabled', true);

  $(td).children().attr('disabled', 'true');

Not yapamam kayıtlı olduğu gibi de-kayıt çapa etiketi için tıklayın işlevi dinamik olarak. VE DEVRE DIŞI MODUNDA BAĞLANTIYI GÖSTERECEĞİM.

CEVAP
23 NÄ°SAN 2012, PAZARTESÄ°


Bir bağlantı (taşınabilir bir şekilde) devre dışı bırakabilirsiniz. Bunlardan biri de (kendi avantajları ve dezavantajları her biri) kullanabilirsiniz.

CSS yolu

Bu olmalıdırdoğru yolutarayıcıların çoğu bunu destekleyecek ne zaman bunu yapmak için:

a.disabled {
    pointer-events: none;
}

Aslında (2015) Peki sadece Chrome, FireFox ve Opera (son sürüm) tarafından desteklenen. Internet Explorer ama not for links sürüm 11'den bu desteklemeye başladı.

Geçici çözüm

Biz, muhtemelen, eğer biz pointer-events: none ama ne için CSS sınıfı tanımlamak gerekiryenidendisabled CSS sınıfı yerine özniteliği? Kesinlikle disabled <a> için desteklenmiyor ama tarayıcılar konuşma için bir şey demesinbilinmeyenöznitelikleri. disabled özellik IE kullanıyorum ama IE disabled özel öznitelik onur duyarız pointer-events göz ardı eder; diğer CSS şikayet tarayıcıları göz ardı ederbilinmeyendisabled nitelik ve pointer-events onur. Daha kolay açıklamak daha yazmak için:

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

Müdahale tıklama

href JavaScript için bir işlevi kullanmak (ya da özürlü kendisi öznitelik) durumunu kontrol edin ve durumda bir şey yok.

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

Bağlantıları devre dışı bırakmak için:

$("td > a").attr("disabled", "disabled");

Yeniden etkinleÅŸtirmek onlara

$("td > a").removeAttr("disabled");

Eğer istediğiniz yerine .is("[disabled]") kullanabilirsiniz .attr("disabled") != undefined (jQuery 1.6 için undefined zaman özniteliği ayarlı değil) ama is() çok daha net (teşekkürler Dave Stewart için bu ipucu). Lütfen not buradayım kullanarak disabled öznitelik standart olmayan bir şekilde, eğer istediğin bu o zaman yerine özniteliği bir sınıf ve değiştirme .is("[disabled]") .hasClass("disabled") (ekleme ve çıkarma addClass() removeClass()).

Bağlantı açık

href özniteliği temizleyin. Bu kod ile bir olay işleyicisi ekleyin ama kendisini bağlantı değiştirin. Bu kod bağlantıları devre dışı bırakmak için kullanın:

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

Ve yeniden etkinleştirmek için bu onlara

$("td > a").each(function() {
    this.attr("href", this.data("href")).removeAttr("disabled");
});

Şahsen bu çözüm çok özürlü bağlantıları yapmanız durumunda değil () ama onu sevmiyorumolabilirbir bağlantıyı takip etmek için çeşitli yol nedeniyle daha uyumlu olacak.

Sahte tıklama işleyicisi

/return false bağlantı takip olmayacak yerde onclick bir fonksiyon Ekle. Bağlantıları devre dışı bırakmak için:

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

Yeniden etkinleÅŸtirmek onlara

$("td > a").removeAttr("disabled").off("click");

İlki yerine bu çözümü tercih etmek için bir neden yoktur sanmıyorum.

Stil

Stil CSS kuralı aşağıdaki kullanabilmek disabled nitelik Ekle yaptık bağlantısını devre dışı bırakmak için her ne kullanıyorsunuz: daha da basit

a[disabled] {
    color: gray;
}

Öznitelik yerine: bir sınıf kullanıyorsanız

a.disabled {
    color: gray;
}

Bunu PaylaÅŸ:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VÄ°DEO

Rastgele Yazarlar

  • 24 Канал

    24 КанаÐ

    5 ÅžUBAT 2006
  • 2ndfloor91

    2ndfloor91

    17 Kasım 2007
  • jeffisthecoolguy

    jeffisthecoo

    17 HAZÄ°RAN 2013