Вимкнено тег 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>с (і <select>з і <textarea>с).

Щоб "відключити" посилання, ви можете видалити його hrefатрибут або додати обробник кліків, який повертає помилку.

Щоб <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як це (потрібно, щоб діва охоплював 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;
   }
} 

Використовуйте кнопки та посилання правильно.

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

• Посилання переносять вас в інше місце, або на іншу сторінку, або на інше місце на одній сторінці.

Якщо ви будете дотримуватися цих правил, не буде жодного сценарію, коли вам потрібно буде відключити посилання. Навіть якщо ви зробите посилання, вигляд буде відключений і він чистий onclick

<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. У моєму випадку я використовую кутовий та ng-інвалід для гармошки 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>

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

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

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

Або

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