Как отключить ссылку тега <a>для определенного дочернего элемента элемента? - PullRequest
0 голосов
/ 09 мая 2020

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

Например, здесь я хочу отключить красную сторону контейнера.

a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 5px;
}

.block-1 {
  width: 50%;
  height: 100%;
  background-color: #3e3e3e;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

.block-2 {
  width: 50%;
  height: 100%;
  background-color: red;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}
<a href="#">
  <div class="container">
    <div class="block-1">Active</div>
    <div class="block-2">Disabled</div>
  </div>
</a>

Ответы [ 3 ]

1 голос
/ 09 мая 2020

Все, что вы вставляете в тег <a>, будет интерактивным, потому что событие «щелчок» фактически запускается на родительском теге (теге <a>), а не на том, что внутри него.

Вам нужно разделить это - просто сделайте один div ссылкой, а другой нет.

a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 5px;
}

.block-1 {
  width: 50%;
  height: 100%;
  background-color: #3e3e3e;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

.block-2 {
  width: 50%;
  height: 100%;
  background-color: red;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}
<div class="container">
   <a href="#" class="block-1">Active</a>
   <div class="block-2">Disabled</div>
</div>
0 голосов
/ 09 мая 2020

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Disable Link using CSS</title> 
    <style type="text/css"> 
        .not-active { 
            pointer-events: none; 
            cursor: default; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3>A Computer Science Portal for Geeks</h3> 
        <b>Disabled link:</b> To visit us  
          <a href="www.geeksforgeeks.org"
             class="not-active">Click Here</a> 
        <br> 
        <br> 
        <b>Enabled link:</b> To use our ide  
          <a href= 
             "https://ide.geeksforgeeks.org/tryit.php"> 
            Click Here</a> 
    </center> 
</body> 
  
</html> 
0 голосов
/ 09 мая 2020

Один из вариантов - добавить обработчик кликов. Как и , о котором говорится в этом сообщении , вы можете указать браузеру переходить или не переходить по ссылке, позвонив e.preventDefault().

В приведенном ниже коде измените disabled и включите / off the link.

Однако я должен добавить, что, хотя я не являюсь экспертом в области специальных возможностей, это не очень "semanti c", и я предполагаю, что он, вероятно, не работает с программами чтения с экрана ... Возможно, что-то вроде aria-disabled можно было бы исправить, но я недостаточно знаком с этим, чтобы сказать.

var link = document.querySelector('a');
var disabled = true;
link.addEventListener('click', (e) => {
  if (disabled) {
    console.log('disabled');
    e.preventDefault();
  }
});
<a href="https://google.com">My link</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...