Wyłączony tag href

Chociaż ten link jest wyłączony, nadal można go kliknąć.

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

Czy mogę wyłączyć kliknięcie, jeśli jest wyłączone? Czy koniecznie muszę używać JavaScript?

Nie ma wyłączonego atrybutu dla hiperłączy. Jeśli nie chcesz, aby coś było połączone, musisz <a>całkowicie usunąć tag lub usunąć jego hrefatrybut.

Za pomocą css wyłączysz hiperłącze. Spróbuj poniżej

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

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

Możesz użyć:

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

Możesz użyć jednego z tych rozwiązań:

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>

Spróbuj tego:

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

<a>Tag nie posiada disabledatrybut, to tylko dla <input>s (i <select>S i <textarea>S).

Aby „wyłączyć” link, możesz usunąć jego hrefatrybut lub dodać moduł obsługi kliknięć, który zwraca wartość false.

Musisz usunąć <a> tag, aby się go pozbyć.

lub spróbuj użyć: -

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

Wskazówki 1: Korzystanie z CSS pointer-events: none;

Wskazówki 2: Korzystanie z JavaScript javascript:void(0) (jest to najlepsza praktyka)

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

Wskazówki 1: Korzystanie z Jquery $('selector').attr("disabled","disabled");

Tylko CSS: usuwa link z href.

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

Zezwolenie rodzicowi na pointer-events: nonewyłączenie dziecka w a-tagten sposób (wymaga, aby div obejmował a i nie miał 0 szerokości / wysokości):

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

gdzie:

.disabled {
    pointer-events: none;
}

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

możesz wyłączyć link używając javascript w czasie wykonywania, używając tego kodu

$ („. page-link”). css („wskaźniki-zdarzenia”, „brak”);

Jeśli chcesz pozbyć się wskaźnika, możesz to zrobić za pomocą css za pomocą kursora .

Możesz emulować wyłączony atrybut na <a>znaczniku.

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

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

W moim przypadku używam

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

Mam jeden:

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

Mam nadzieję, że ci to pomoże;)

Nie możemy go wyłączyć bezpośrednio, ale możemy wykonać następujące czynności

1. dodać type="button".
2. usuń href=""atrybut
3. dodaj disabledatrybut, aby pokazać, że jest wyłączony przez zmianę Courser i staje się przygaszony.

Oto przykład

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

Byłem w stanie osiągnąć pożądany rezultat za pomocą operacji trójskładnikowej ng-href

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

gdzie

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

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

Używaj przycisków i linków poprawnie.

• Przyciski aktywują funkcje skryptowe na stronie internetowej (okna dialogowe, regiony rozwijania / zwijania).

• Linki prowadzą do innej lokalizacji, do innej strony lub innej lokalizacji na tej samej stronie.

Jeśli będziesz przestrzegać tych zasad, nie będzie żadnego scenariusza, w którym musisz wyłączyć link. Nawet jeśli link wygląda na wizualnie wyłączony i pusty po kliknięciu

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

Nie będziesz brać pod uwagę dostępności, a czytniki ekranu odczytują go jako link, a osoby niedowidzące będą się zastanawiać, dlaczego link nie działa.

Jeśli korzystasz z WordPress, stworzyłem wtyczkę, która może to zrobić i wiele więcej bez konieczności znajomości kodowania. Wszystko, co musisz zrobić, to dodać selektor linków, które chcesz wyłączyć, a następnie wybierz „Wyłącz wszystkie linki za pomocą tego selektora w nowej karcie”. z menu rozwijanego, które się pojawi, i kliknij Aktualizuj.

Kliknij tutaj, aby wyświetlić gif, który to pokazuje

Możesz pobrać bezpłatną wersję z repozytorium wtyczek WordPress.org, aby ją wypróbować.

Oto różne sposoby wyłączenia tagu:

<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

Ponieważ nie ma wyłączonych atrybutów dla tagu zakotwiczenia. Jeśli chcesz zatrzymać zachowanie tagu zakotwiczenia w funkcji jQuery, możesz użyć poniższego wiersza na początku funkcji:

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

event.preventDefault ()

Widzę, że opublikowano tu już mnóstwo odpowiedzi, ale nie sądzę, aby było jeszcze jedno, które łączyłoby wspomniane już podejścia z tym, które okazało się skuteczne. Ma to na celu wyłączenie wyświetlania linku, a także przekierowanie użytkownika na inną stronę.

Ta odpowiedź zakłada, że ​​używasz jquery i bootstrap , i używa innej właściwości do tymczasowego przechowywania hrefwłaściwości, gdy jest wyłączona.

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

Wszystko w znaczniku href wyświetli się w lewym dolnym rogu okna przeglądarki po najechaniu myszą.

Osobiście uważam, że wyświetlanie użytkownikowi czegoś takiego jak javascript: void (0) jest ohydne.

Zamiast tego, zostaw href off, użyj magii z jQuery / cokolwiek innego i dodaj regułę stylu (jeśli nadal potrzebujesz, aby wyglądała jak link):

a {
    cursor:pointer;
}

Najlepsza odpowiedź jest zawsze najprostsza. Nie ma potrzeby żadnego kodowania.

Jeśli tag kotwiczący (a) nie ma atrybutu href, jest jedynie symbolem zastępczym hiperłącza. Obsługiwane przez wszystkie przeglądarki!

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

Możesz wyłączyć tagi kotwicy, zwracając wartość false. W moim przypadku używam akordeonu kątowego i ng-wyłączone dla akordeonu Jquery i muszę wyłączyć sekcje.

Więc stworzyłem mały fragment js, aby to naprawić.

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

jeśli chcesz tylko tymczasowo wyłączyć link, ale zostaw tam href, aby włączyć później (to właśnie chciałem zrobić), okazało się, że wszystkie przeglądarki używają pierwszego href. Dlatego mogłem zrobić:

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

Wariant, który mi odpowiada:

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

Tylko dodawanie: Działa to ogólnie, ale nie zadziała, jeśli użytkownik wyłączył JavaScript w przeglądarce.

1) Opcjonalnie możesz użyć klasy Bootstrap 3 w tagu kotwicy, aby wyłączyć tag href, po zintegrowaniu wtyczki bootstrap 3

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

Lub

2) Dowiedz się, jak włączyć obsługę JavaScript w przeglądarce za pomocą HTML lub JS. lub utwórz wyskakujące okienko z informacją, aby włączyć obsługę javascript przed użyciem witryny