Блог

Я использую ajax для отображения данных из базы данных. По сути, это приложение для чата, и когда пользователь нажимает на определенный диалог, он добавляет данные в представление.

Мой диалог div:

 <div class="kt-widget__item">
  <span class="kt-media kt-media--circle">
      <img src="{{ asset('media/users/100_4.jpg') }}" alt="image">
  </span>
  <div class="kt-widget__info">
    <div class="kt-widget__section">
      <a href="#" class="kt-widget__username">Teresa Fox</a>
    </div>
    <span class="kt-widget__desc">
      PR Executive
    </span>
  </div>
  <div class="kt-widget__action">
    <span class="kt-widget__date">4 Days</span>
  </div>
</div>
 

и демонстрационный CSS для этого div:

    .kt-widget__item {
        cursor: pointer;
        background: darkgrey;
        border-radius: 8px;
        font-size: 15px;
        color: black;
        height: 100px;
        width: 100%;a
        display: flex;
        align-items: center;
}
    .kt-widget__item:hover {
        cursor: pointer;
        border-radius: 10px;
        border: 1px solid darkgrey;
        background:  rgb(187, 184, 184);
        font-size: 15px;
        color: black;
        height: 100px;
        width: 100%;
        margin: auto;
}
    .kt-widget__item:active {
        border-radius: 10px;
        border: 1px solid rgb(156, 155, 155);
        background: rgb(156, 155, 155);
        
}
 

Теперь я хочу сделать выбранный div активным. Как это можно сделать?

С уважением
, Saad

Важно: невозможно установить :active псевдокласс элемента с помощью JavaScript. Элемент становится активным, когда пользователь активирует его (обычно щелчком мыши), и становится неактивным, когда пользователь деактивирует его (обычно, не щелкая мышью).

Чтобы убедиться, что div выглядит так, как будто он активен, вы должны сначала установить tabindex атрибут для div, чтобы сделать его фокусируемым.

Ссылка: tabindex

Затем, чтобы имитировать активный внешний вид, добавьте div:focus правило CSS, которое точно соответствует div:active правилу.

Наконец, просто создайте поддельный «активный» внешний вид, вызвав HTMLElement.focus() .

Удалите поддельный «активный» внешний вид с помощью вызова HTMLElement.blur() .

Пример:

 const fdiv = document.getElementById('focusable');
const btn = document.getElementById("addfocus");
btn.onclick = function() {
  fdiv.focus();
};
const btn2 = document.getElementById("removefocus");
btn2.onclick = function() {
  fdiv.blur();
}; 

 div {
  border: 1px solid black;
  background-color: #ccc;
  width: 50%;
  height: 30px;
  margin: 12px 0;
}

div:active,
div:focus {
  background-color: dodgerblue;
  outline: none;
} 

 <div id="not-focusable">I'm clickable but not focusable, click me</div>
<div id="focusable" tabindex="0">I'm focusable, click me</div>
<button id="addfocus">Focus the div</button>
<button id="removefocus">Blur the div</button><br/>