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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

где:

.disabled {
    pointer-events: none;
}

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

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

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

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

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

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

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

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

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

У меня есть:

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

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

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

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

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

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

где

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Этот ответ предполагает, что вы используете 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;
}

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

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

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

a {
    cursor:pointer;
}

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

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

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

Вы можете отключить теги привязки, вернув 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>

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

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

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

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

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

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

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

Или

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