Ответ 1
Для гиперссылок нет отключенного атрибута. Если вы не хотите, чтобы что-то связывалось, вам нужно вообще удалить тег <a>
или удалить его атрибут 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>
Вы можете использовать одно из следующих решений:
<a>link</a>
<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>
<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>
(и <select>
и <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");
Если у родителя есть pointer-events: none
, он отключит дочерний элемент a-tag
, как это (требуется, чтобы div закрывал a и не имел ширины и высоты):
<div class="disabled">
<a href="/"></a>
</div>
где:
.disabled {
pointer-events: none;
}
Вы можете отключить ссылку, используя JavaScript во время выполнения, используя этот код
$ ('. page-link'). css ("указатель-события", "нет");
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
});
});
Если вы хотите избавиться от указателя, вы можете сделать это с помощью css, используя cursor.
Вы можете эмулировать отключенный атрибут в теге <a>
.
<a href="link.html" disabled="">Link</a>
a[disabled] {
pointer-events: none;
cursor: default;
}
В моем случае я использую
<a href="/" onClick={e => e.preventDefault()}>
Мы не можем отключить его напрямую, но мы можем сделать следующее
type="button"
.href=""
.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
}
?>
Используйте кнопки и ссылки правильно.
• Кнопки активируют скриптовые функции на веб-странице (диалоги, разворачивание/свертывание областей).
• Ссылки ведут в другое место, либо на другую страницу, либо в другое место на той же странице.
Если вы будете следовать этим правилам, не будет никакого сценария, когда вам нужно отключить ссылку. Даже если вы сделаете ссылку выглядящей визуально отключенной и пустой по клику
<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"
Вы не будете рассматривать возможность доступа, и программы чтения с экрана будут читать его как ссылку, а люди с ослабленным зрением будут удивляться, почему эта ссылка не работает.
Если вы используете WordPress, я создал плагин, который может сделать это и многое другое без необходимости знать, как что-то кодировать. Все, что вам нужно сделать, это добавить селектор ссылок, которые вы хотите отключить, и затем выбрать "Отключить все ссылки с этим селектором в новой вкладке". из выпадающего меню, которое появляется и нажмите обновить.
Нажмите здесь, чтобы посмотреть GIF, который демонстрирует это
Вы можете получить бесплатную версию из репозитория плагинов WordPress.org, чтобы попробовать ее.
Мне удалось достичь желаемого результата с помощью тройной операции ng-href
<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>
где
a.is-disabled{
color: grey;
cursor: default;
&:hover {
text-decoration: none;
}
}
Все, что находится в теге href, будет отображаться в левом нижнем углу окна браузера при наведении на него мыши.
Я лично думаю, что что-то вроде javascript: void (0), отображаемое пользователю, является отвратительным.
Вместо этого оставьте href, сделайте свою магию с помощью jQuery/whatever else и добавьте правило стиля (если вам все еще нужно, чтобы он выглядел как ссылка):
a {
cursor:pointer;
}
<a href="/" disabled="true" onclick="return false">123</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>
Вы можете отключить теги привязки, вернув 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>
если вы просто хотите временно отключить ссылку, но оставьте href там для включения позже (это то, что я хотел сделать), я обнаружил, что все браузеры используют первый href. Следовательно, я смог:
<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>