html ссылки - Как отключить ссылку, используя только CSS?




убрать подчеркивание (17)

<a href="#!">1) Link With Non-directed url</a><br><br>

<a href="#!" disabled >2) Link With with disable url</a><br><br>

Есть ли способ отключить ссылку с помощью CSS?

У меня есть класс, называемый current-page и хочу, чтобы ссылки с этим классом были отключены, чтобы при нажатии на них не выполнялось никаких действий.


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

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>


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


Только так, как вы могли бы сделать это без 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, вам придется заменить его событие click или href, как описано другими.

PS: Просто уточнить, я бы счел это довольно неопрятным решением, а для SEO это тоже не самое лучшее, но я считаю, что это лучше всего с чисто CSS.


Свойство pointer-events позволяет контролировать, как элементы HTML реагируют на события мыши / касания - включая наведение / активные состояния CSS, события click / tap в Javascript и видимость курсора.

Это не единственный способ отключить ссылку , но хороший способ CSS, который работает в IE10 + и всех новых браузерах:

.current-page {
  pointer-events: none;
  color: grey;
}
<a href="#" class="current-page">This link is disabled</a>


Это можно сделать в 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; не требуется, но это делает ссылку более похожей на обычный текст.


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

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

Если вы хотите придерживаться только HTML / CSS в форме, другой вариант - использовать кнопку. Настройте его и установите disabled атрибут.

Например: http://jsfiddle.net/cFTxH/1/


Демо здесь
Попробуй это

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

Благодаря всем, кто разместил решения, я объединил несколько подходов, чтобы обеспечить более продвинутые функции с 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

вы можете использовать этот 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>


Вы также можете изменить размер другого элемента, чтобы он покрывал ссылки (используя правый индекс z): это «съест» клики.

(Мы обнаружили это случайно, потому что у нас была проблема с внезапно неактивными ссылками из-за «отзывчивого» дизайна, заставляя H2 покрывать их, когда окно браузера было мобильным.)


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

Вам действительно нужен javascript. Вот как вы будете делать то, что хотите, используя библиотеку jQuery.

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

Ответ уже находится в комментариях к вопросу. Для большей видимости я копирую css-tricks.com/pointer-events-current-nav здесь:

.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-events в CSS для элементов, отличных от SVG, является экспериментальным. Эта функция была частью спецификации CSS UI, но из-за многих открытых проблем была отложена до CSS4.


Если вы хотите, чтобы это был только CSS, логика отключения должна определяться CSS.

Чтобы переместить логику в определениях CSS, вам придется использовать селектора атрибутов. Вот некоторые примеры :

Отключить ссылку, которая имеет точный href: =

Вы можете отключить ссылки, которые содержат определенное значение href, например:

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

[href="//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.


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

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

Затем, чтобы снова включить это

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

Проверено на Firefox и IE 11, это сработало.


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

Например, в синтаксисе ASP.NET Core :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>




html css