Чи є спосіб відключити посилання за допомогою CSS?

У мене є клас, який називається, current-pageі хочу, щоб зв’язки з цим класом були відключені, щоб при натисканні на них не виникало жодної дії.

Відповідь вже в коментарях до питання. Для більшої наочності я копіюю це рішення тут:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" class="not-active">Link</a>

Щоб отримати підтримку веб-переглядача, перегляньте https://caniuse.com/#feat=pointer-events . Якщо вам потрібно підтримати IE, існує рішення; дивіться цю відповідь .

Попередження: Використання pointer-eventsCSS для елементів, що не належать до SVG, є експериментальним. Ця функція була частиною специфікації проекту CSS3 UI, але через багато відкритих проблем була перенесена на CSS4.

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

Те, що вам справді потрібно, - це якийсь JavaScript. Ось як би ви робили те, що хочете, використовуючи бібліотеку jQuery.

$('a.current-page').click(function() { return false; });

CSS не може цього зробити. CSS призначений лише для презентації. Ваші варіанти:

• Не включайте hrefатрибут у ваші <a>теги.
• Використовуйте JavaScript, щоб знайти елементи прив’язки до цього class, і видаліть їх hrefабо onclickатрибути відповідно. jQuery допоможе вам у цьому (NickF показав, як зробити щось подібне, але краще).

Посилання для вимкнення завантаження

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Кнопка відключення завантаження, але це схоже на посилання

<button type="button" class="btn btn-link">Link</button>

Ви можете встановити hrefатрибутjavascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}

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

Я використав:

.current-page a:hover {
pointer-events: none !important;
}

І було недостатньо; у деяких браузерах все ще відображається посилання, моргаючи.

Мені довелося додати:

.current-page a {
cursor: text !important;
}

Якщо ви хочете дотримуватися лише HTML / CSS у формі, іншим варіантом є використання кнопки. Складіть його та встановіть disabledатрибут.

Наприклад, http://jsfiddle.net/cFTxH/1/

Якщо ви хочете, щоб це був лише CSS, логіку відключення має визначати CSS.

Щоб перемістити логіку у визначеннях CSS, вам доведеться використовувати селектори атрибутів. Ось кілька прикладів:

Вимкнути посилання з точним href: =

Ви можете вимкнути посилання, які містять певне значення href, наприклад:

<a href="//website.com/exact/path">Exact path</a>

[href="https://stackoverflow.com//website.com/exact/path"]{
  pointer-events: none;
}

Вимкнення посилання, що містить фрагмент шляху: *=

Тут будь-яке посилання, що містить /keyword/шлях, буде відключено

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Вимкнення посилання, що починається з: ^=

[attribute^=value]цільової оператор атрибут , який починається зі значенням конкретного. Дозволяє скасувати веб-сайти та кореневі шляхи.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

Ви навіть можете використовувати його для відключення не-https посилань. Наприклад :

a:not([href^="https://"]){
  pointer-events: none;
}

Вимкнення посилання, що закінчується на: $=

[attribute$=value]Оператор цільового атрибута , який закінчується значенням питомої. Відмовитися від розширень файлів може бути корисно.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

Або будь-який інший атрибут

Css може орієнтуватися на будь-який атрибут HTML. Може бути rel, target, data-customі так далі ...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Поєднання селекторів атрибутів

Ви можете пов’язати кілька правил. Скажімо, ви хочете відключити будь-яке зовнішнє посилання, але не ті, які вказують на ваш веб-сайт:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

Або відключити посилання на PDF-файли певного веб-сайту:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Підтримка браузера

Селектори атрибутів підтримуються з IE7. :not()селектор з IE9.

Один із способів зробити це за допомогою CSS - це встановити CSS на обгортці, divяку ви встановите, щоб вона зникала, і щось інше займає її місце.

Наприклад:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

З CSS, як

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

Щоб насправді вимкнути, aвам доведеться замінити його подія клацання або href, як описано іншими.

PS: Просто для уточнення, я вважаю це досить неохайним рішенням, і для SEO це не найкраще, але я вважаю, що це найкраще з чисто CSS.

Спробуйте це:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

Покажчик події властивість дозволяє управляти над тим, як HTML елементи реагують на миша / сенсорні події - в тому числі CSS ширяння / активних станів, натисніть / TAP подій в JavaScript, і буде чи курсор видно.

Це не єдиний спосіб відключення посилання , але хороший CSS спосіб роботи в IE10 + та всіх нових браузерах:

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

Я шукав через Інтернет і не знайшов кращого за це . В основному, щоб вимкнути функціональність натискання кнопок, просто додайте стиль CSS, використовуючи jQuery так:

$("#myLink").css({ 'pointer-events': 'none' });

Потім, щоб знову це зробити, зробіть це

$("#myLink").css({ 'pointer-events': '' });

Перевірив Firefox та IE 11, він працював.

Ви можете використовувати цей css:

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}

<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

Дякую всім, хто розмістив рішення, я поєднав декілька підходів, щоб забезпечити ще більш досконалий disabledфункціонал. Ось суть , і код нижче.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

Ось клас coffescript:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

Ви також можете розмістити ще один елемент, щоб він охоплював посилання (використовуючи правильний z-індекс): Це "з'їсть" кліки.

(Ми виявили це випадково, оскільки у нас виникла проблема з раптово неактивними посиланнями через "чуйний" дизайн, який спричинив H2 для покриття їх, коли вікно браузера було мобільним.)

Демонстрація тут
Спробуйте цю

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

Ще одна хитрість - розмістити над ним невидимий елемент. Це також вимкне будь-які ефекти наведення курсора

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}

Це можливо зробити в CSS

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

Дивіться на:

Зауважте, що це text-decoration: none;і color: black;не потрібно, але це посилання виглядає більше як звичайний текст.

pointer-events:none вимкне посилання:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>