Отключенный тег href

Хотя эта ссылка отключена, она по-прежнему доступна для кликов.

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

Могу ли я сделать его недоступным, если он отключен? Должен ли я использовать JavaScript обязательно?

Ответ 1

Для гиперссылок нет отключенного атрибута. Если вы не хотите, чтобы что-то связывалось, вам нужно вообще удалить тег <a> или удалить его атрибут href.

Ответ 2

С помощью css вы отключите гиперссылку. Попробуйте ниже

a.disabled {
  pointer-events: none;
  cursor: default;
}
<a href="link.html" class="disabled">Link</a>

Ответ 3

Вы можете использовать:

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

Ответ 4

Вы можете использовать одно из следующих решений:

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>

Ответ 5

Попробуйте следующее:

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

Ответ 7

Вам нужно удалить тег <a>, чтобы избавиться от этого.

или попробуйте использовать: -

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

Ответ 8

HTML:

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

CSS

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

Ответ 9

Советы 1: Использование CSS pointer-events: none;

Советы 2: Использование JavaScript javascript:void(0) (это лучшая практика)

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

Советы 1: Использование Jquery $('selector').attr("disabled","disabled");

Ответ 10

Если у родителя есть pointer-events: none, он отключит дочерний элемент a-tag, как это (требуется, чтобы div закрывал a и не имел ширины и высоты):

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

где:

.disabled {
    pointer-events: none;
}

Ответ 11

Вы можете отключить ссылку, используя JavaScript во время выполнения, используя этот код

$ ('. page-link'). css ("указатель-события", "нет");

Ответ 12

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

Ответ 13

Если вы хотите избавиться от указателя, вы можете сделать это с помощью css, используя cursor.

Ответ 14

Вы можете эмулировать отключенный атрибут в теге <a>.

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

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

Ответ 15

В моем случае я использую

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

Ответ 16

Мы не можем отключить его напрямую, но мы можем сделать следующее

  1. добавить type="button".
  2. удалите href="".
  3. добавить disabled атрибут, чтобы он показывал, что его отключили, изменив курсора, и он затемняется.

Ниже приведен пример

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

Ответ 17

Используйте кнопки и ссылки правильно.

• Кнопки активируют скриптовые функции на веб-странице (диалоги, разворачивание/свертывание областей).

• Ссылки ведут в другое место, либо на другую страницу, либо в другое место на той же странице.

Если вы будете следовать этим правилам, не будет никакого сценария, когда вам нужно отключить ссылку. Даже если вы сделаете ссылку выглядящей визуально отключенной и пустой по клику

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

Вы не будете рассматривать возможность доступа, и программы чтения с экрана будут читать его как ссылку, а люди с ослабленным зрением будут удивляться, почему эта ссылка не работает.

Ответ 18

Если вы используете WordPress, я создал плагин, который может сделать это и многое другое без необходимости знать, как что-то кодировать. Все, что вам нужно сделать, это добавить селектор ссылок, которые вы хотите отключить, и затем выбрать "Отключить все ссылки с этим селектором в новой вкладке". из выпадающего меню, которое появляется и нажмите обновить.

Нажмите здесь, чтобы посмотреть GIF, который демонстрирует это

Вы можете получить бесплатную версию из репозитория плагинов WordPress.org, чтобы попробовать ее.

Ответ 19

Мне удалось достичь желаемого результата с помощью тройной операции ng-href

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

где

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

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

Ответ 20

Все, что находится в теге href, будет отображаться в левом нижнем углу окна браузера при наведении на него мыши.

Я лично думаю, что что-то вроде javascript: void (0), отображаемое пользователю, является отвратительным.

Вместо этого оставьте href, сделайте свою магию с помощью jQuery/whatever else и добавьте правило стиля (если вам все еще нужно, чтобы он выглядел как ссылка):

a {
    cursor:pointer;
}

Ответ 21

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

Ответ 22

Вариант, который мне подходит:

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

Ответ 23

Вы можете отключить теги привязки, вернув false. В моем случае Im использует angular и ng-disabled для аккордеона JQuery, и мне нужно отключить разделы.

Итак, я создал небольшой фрагмент js, чтобы исправить это.

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

Ответ 24

если вы просто хотите временно отключить ссылку, но оставьте href там для включения позже (это то, что я хотел сделать), я обнаружил, что все браузеры используют первый href. Следовательно, я смог:

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