Как отключить ссылки на текущей странице с помощью CSS

Если хотите отключить ссылки на текущей странице, читайте эту статью и попробуйте примеры сами.

Отключая ссылки на текущей странице, вы не будете иметь ссылок к странице, на которой находитесь в этот момент. Это тот случай, когда вы не нажимаете на ссылку, так как она приведет к той же странице, на которой находитесь.

Можно отключить ссылки, используя свойство pointer-events, которое указывает, будет ли элемент на странице реагировать.

Рассмотрим пример, где можно увидеть использование pointer-events. Здесь тег <a> отключен с помощью свойства cursor со значением "default":

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .disabled { 
      pointer-events: none; 
      cursor: default; 
      } 
    </style>
  </head>
  <body>
    <h2>Отключите ссылку на текущей странице</h2>
    <a href="https://www.w3docs.com/" class="disabled">Нажмите сюда</a> 
  </body>
</html>

Как видите, несмотря на то, что он выглядит как ссылка, ничего не происходит при нажатии на него.

В следующем примере свойства text-decoration и color применены к тегу ‘a’, и, таким образом, можно понять, что ссылка отключена:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .disabled { 
      pointer-events: none; 
      cursor: default; 
      text-decoration: none; 
      color: #000000; 
      } 
    </style>
  </head>
  <body>
    <h2>Отключите ссылку на текущей странице</h2>
    <a href="https://www.w3docs.com/" class="disabled">Нажмите сюда</a> 
  </body>
</html>

Можно также отключить ссылку на текущей странице с помощью свойства user-select со значением none.

Давайте рассмотрим пример, который показывает разницу между отключенной и активной ссылкой:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      a.button,button {
      display: inline-block;
      padding: 20px 55px;
      margin: 20px 10px;
      line-height: 18px;
      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;
      border: 0;
      -webkit-border-radius: 8px; 
      -moz-border-radius: 8px; 
      border-radius: 8px;
      background-color:#8ebf42;
      text-decoration:none;
      color:#ffffff;
      }
      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: #cccccc;
      color: #2a2a2a;
      outline: 0;
      }
    </style>
  </head>
  <body>
    <h2>Отключите ссылку на текущей странице</h2>
    <a href="https://www.w3docs.com/" disabled="disabled" class="button">Disabled</a>
    <a href="https://www.w3docs.com/" class="button">Нажмите сюда</a>
  </body>
</html>
Считаете ли это полезным?

Похожие статьи