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

266

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

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

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

Алан Коромано
источник
Просто для пояснения: я предполагаю, что вы имеете в виду, что вы отключили ссылку, но событие "щелчка" по-прежнему срабатывает?
Леви Хэк с
2
Вы можете использовать указатель-события: нет; в css
ppsreejith
3
Вы можете использовать protectDefault (); stackoverflow.com/questions/1357118/…
Ciack404
Но почему бы просто не удалить атрибут href?
MrBoJangles

Ответы:

234

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

Джон Конде
источник
13
Это работает, но я бы счел это плохим UX, если вы оставите на нем существующий CSS. Пользователь щелкнет по нему и подумает, что что-то сломано. Никогда не позволяйте пользователю запутаться в происходящем.
agm1984
Просто добавив курсор: нет; для соответствующей ссылки, кажется, достичь столько же, сколько курсор: нет; события указателя: нет; , , , , В любом случае, для меня это позволяет сменить страницу на одностраничном сайте приложения.
Ствол
2
Ссылка будет по-прежнему фокусируемой и «кликабельной» (используя Enter) с использованием навигации по клавиатуре, даже если вы используете CSS-курсор или события-указатели, что, вероятно, плохо, если вы пытаетесь что-то отключить. Удалите атрибут href или превратите его в span
Том Голден
3
Вы также можете добавить onclick="return false;"к тегу привязки и, возможно, добавить titleатрибут, который объясняет, что ссылка недействительна.
Крейг Лондон,
1
Кроме того, я считаю, что простая очистка hrefи выход из <a>нее не будут соответствовать требованиям ADA.
SlothFriend
353

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

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

Лакхан
источник
4
Обратите внимание, что это работает только в Internet Explorer 11+
Патрик Хиллерт,
31
Когда фокус на тег ссылки с помощью клавиши табуляции и нажмите Enter, это свойство не работает.
Маджид Басирати
2
Должен быть только ответ, если вы не заботитесь о IE9-10
Ринго
1
Это также отключает событие наведения, что означает, что стиль курсора не работает. (<span> & # x20E0; </ span> <- ничего из этого не
Сет Бэттин
2
также используйте прозрачность, чтобы различать активные и отключенные ссылки. opacity: 0.5;
Аамер Шахзад
84

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

<a href="/" onclick="return false;">123n</a>
CodeLikeBeaker
источник
2
не будет работать, если уже есть функция обработчика события щелчка
rahul shukla
70

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

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>

IgniteCoders
источник
32

Попробуй это:

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

источник
Правильно, я всегда использую href = "javascript: void (0)"
Ян Хамара
Это также приятно, если вы все еще хотите сохранить функцию щелчка правой кнопкой мыши, например «скопировать ссылку»
Developer SPM
18

У <a>тега нет disabledатрибута, это только для <input>s (и <select>s и <textarea>s).

Чтобы «отключить» ссылку, вы можете удалить ее hrefатрибут или добавить обработчик кликов, который возвращает false.

Ракета Хазмат
источник
@rocket Есть ли последствия удаления атрибута href? Я имею в виду, это должен быть обязательный атрибут. Не то, чтобы подобные вещи, кажется, имели большое значение в наши дни.
Ринго
@ Ринго: удаление hrefможет сделать курсор не меняется, когда вы наводите курсор на него.
Ракета Хазмат
11

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

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

  <a href="/" onclick="return false;">123n</a>
Рахул Трипати
источник
10

HTML:

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

CSS:

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}
Сайед
источник
10

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

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

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

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

venkatskpi
источник
9

Только CSS: это удаляет ссылку из href.

.disable { 
    pointer-events: none; 
    cursor: default; 
}
Джоэл Адамс
источник
5

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

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

где:

.disabled {
    pointer-events: none;
}
Ferus
источник
Вы также можете применить стиль «pointer-events: none» непосредственно к тегу <a>, например, добавив класс .disabled с javascript, когда вы хотите отключить его. Упаковка <div> не обязательна.
Les Nightingill
Обтекание не требуется, как показано здесь: https://jsfiddle.net/d1owm1d0/1/ для Chrome, Firefox и Safari. Используете ли вы другой браузер, где моя демонстрация не работает?
Les Nightingill
@LesNightingill Если а-тэг оборачивает что - то он не работает: jsfiddle.net/d9gwgdyf
Феруса
это правильно @Ferus. Я не уверен, почему это правда.
Les Nightingill
4
$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});
Махмуд Фарахат
источник
1
Этот код работает по правому клику. Так что это не точное решение.
Лакхан
4

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

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

Чинтан Матукия
источник
Поздно к вечеринке, но это также удаляет любой курсор CSS. В моем случае я использую курсор: не разрешено, если ссылка отключена.
Стив
3

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

ahdaniels
источник
3

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

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

a[disabled] {
   pointer-events: none;
   cursor: default;
}
Blowsie
источник
3

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

<a href="/" onClick={e => e.preventDefault()}>
Chien Chieh Wang
источник
3

У меня есть:

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

Надеюсь, это поможет вам;)


источник
1
Привет, Веренверливиц, добро пожаловать. Хорошо, не думал, что ты будешь первым человеком с таким ответом через 7-8 лет!
Тьяго Мартинс Перес 李大仁
2

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

  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    
}
?>
Асаад Лютф
источник
2

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

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

где

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

   &:hover {
      text-decoration: none;
   }
} 
Кори Вебстер
источник
1

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

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

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

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

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

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

Сенгупта Амит
источник
1

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

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

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

Крис Марабате
источник
1

Вот несколько способов отключить тег:

<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

Как нет отключенных атрибутов для тега привязки. Если вы хотите остановить поведение тега привязки внутри функции jQuery, вы можете использовать строку ниже в начале функции:

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

event.preventDefault ()

Махак Чоудхари
источник
1

Я вижу, что здесь уже есть тонна ответов, но я не думаю, что есть какой-то ясный ответ, который объединяет уже упомянутые подходы в тот, который я нашел для работы. Это делается для того, чтобы ссылка как отображалась отключенной, а также не перенаправляла пользователя на другую страницу.

Этот ответ предполагает, что вы используете jquery и bootstrap , и использует другое свойство, чтобы временно сохранить hrefсвойство, пока оно отключено.

//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;
}
owengall
источник
0

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

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

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

a {
    cursor:pointer;
}
Энигма Плюс
источник
0

Лучший ответ всегда самый простой. Не нужно никакого кодирования.

Если тег привязки (a) не имеет атрибута href, он является только заполнителем для гиперссылки. Поддерживается всеми браузерами!

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

Межгалактический
источник
-1

Вы можете отключить теги привязки, вернув false. В моем случае я использую 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>
Дэррил Виндзор
источник
-1

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

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>
Ангус Уокер
источник
Это недопустимый HTML, как описано на stackoverflow.com/q/26341507/1709587 . Если ваша мотивация заключается в том, чтобы просто сохранить href в исходном коде, чтобы потом было проще отредактировать исходный код, чтобы восстановить его, существуют способы сделать это, не затрагивая спецификацию, например, используя комментарий. Я бы рекомендовал не писать недопустимый HTML-код, как это без веской причины для этого.
Марк Амери
-1

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

<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>
Мусор
источник
-1

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

Просто добавление: это работает в целом, однако это не будет работать, если пользователь отключил JavaScript в браузере.

1) При желании вы можете использовать класс Bootstrap 3 в своем теге привязки, чтобы отключить тег href, после того, как встроенный плагин bootstrap 3 делает

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

Или

2) Узнайте, как включить javascript, используя html или js в браузерах. или создайте всплывающее окно с сообщением пользователю, чтобы разрешить использование JavaScript перед использованием веб-сайта

Olaj
источник