Как сделать анкорную ссылку неактивной или отключенной?

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

<a href='' id='ThisLink'>some text</a>

Я могу легко сделать это с помощью кнопки, добавив, что .attr("disabled", "disabled");
я успешно добавил свойство disabled, но ссылка все еще была активна.
Мне все равно, подчеркнут текст или нет.

Есть подсказка?

Когда вы нажимаете не на того музыканта, он должен просто добавить «Неправильный», а затем перестать быть кликабельным.
Когда вы щелкаете и правы, он должен добавить "Awesome", а затем отключить все <a>теги.

Я только что понял, о чем вы просили (надеюсь). Вот уродливое решение

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

Самый чистый метод - добавить класс с указателями-событиями: нет, если вы хотите отключить щелчок. Он работал бы как обычный ярлык.

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

Используйте стиль CSS -указателей . (как предложил Джейсон Макдональд)

См. MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Поддерживается в большинстве браузеров.

Простое добавление атрибута disabled к привязке выполнит свою работу, если у вас есть глобальное правило CSS, подобное следующему:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

$('a').removeAttr('href')

или

$('a').click(function(){ return false})

Это зависит от ситуации

Bootstrap предоставляет нам .disabledкласс. Пожалуйста, используйте это.

Но .disabledкласс работает только тогда, когда тег «a» уже имеет класс «btn». Он не работает ни с одним старым тегом "a". btnКласс не может быть уместно в том или ином контексте , как это имеет стиль коннотации. Под обложками .disabledкласс устанавливается pointer-eventsв значение none, поэтому вы можете заставить CSS делать то же самое, что предлагали Saroj Aryal и Vitrilo. (Спасибо, Лес Найтингилл за этот совет).

Добавить cssкласс:

.disable_a_href{
    pointer-events: none;
}

Добавьте это jquery:

$("#ThisLink").addClass("disable_a_href"); 

Просто удалите hrefатрибут из тега привязки.

Лучший способ - предотвратить действие по умолчанию. В случае тега привязки поведение по умолчанию - перенаправление на hrefуказанный адрес.

Итак, следующий javascript работает лучше всего в этой ситуации:

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

Вы можете использовать событие onclick, чтобы отключить действие щелчка:

<a href='' id='ThisLink' onclick='return false'>some text</a>

Или вы можете просто использовать что-то другое, кроме <a>тега.

Комментарии Джейсона Макдональда у меня сработали, протестированы в Chrome, Mozila и IE.

Добавлен серый цвет, чтобы показать эффект отключения.

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery выбирал только первый элемент в списке привязок, добавлял метасимвол (*) для выбора и отключения всех элементов с идентификатором #ThisLink.

$("#ThisLink*").addClass("disable_a_href"); 

Напишите это одной строкой кода jQuery

$('.hyperlink').css('pointer-events','none');

если вы хотите написать в файл css

.hyperlink{
    pointer-events: none;
}

Создайте следующий класс в таблице стилей:

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

Добавьте этот класс в ссылку динамически, как показано ниже.

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

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

$('a').contents().unwrap();

Просто в SASS:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

Это метод, который я использовал для отключения. Надеюсь, он поможет.

$("#ThisLink").attr("href","javascript:;");

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

Это был бы другой способ сделать это, обработчик return false, который отключит ссылку, будет добавлен после одного щелчка.

Самый простой способ

В вашем html:

<a id="foo" disabled="true">xxxxx<a>

В вашем js:

$('#foo').attr("disabled", false);

Если вы используете его как атрибут, отлично работает