Как сделать div выбранным в HTML?

Я попытался сделать div как выбранный, а не зависать.

Мне нужно изменить цвет контура, когда выбран div. Я пробовал то же самое, что и наведение. Но мне нужна помощь в селекторе. Возможно ли это с помощью JavaScript или CSS 3 достаточно?

Вот что я пробовал:

div {
    background: #ccc;
    margin: 20px;
}
div:hover {
    outline: 1px solid blue;
}

<div>1</div>
<div>2</div>
<div>3</div>

Ответы

Ответ 1

Вы можете попробовать :focus псевдокласс. Обратите внимание, что вам понадобится tabindex, чтобы сделать ваш div доступным.

div {
    background: #ccc;
    margin: 20px;
}
div:focus {
    outline: 1px solid blue;
}

<div tabindex="-1">1</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>

Ответ 2

Как я уже сказал в своем другом ответе, вы можете использовать :focus псевдокласс.

Но есть проблема: он не будет работать, если элементы содержат другие настраиваемые элементы.

Однако он может быть исправлен с использованием событий JS:

var els = document.body.children;
for(var i=0; i<els.length; ++i) {
    els[i].addEventListener('focus', focus, true);
    els[i].addEventListener('blur', blur, true);
}
function focus() {
    this.classList.add('focus');
}
function blur() {
    this.classList.remove('focus');
}

div {
    background: #ccc;
    margin: 20px;
}
div:focus, div.focus { /* :focus is a fallback in case JS is disabled */
    outline: 1px solid blue;
}

<div tabindex="-1">
    1
    <input />
</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>

Ответ 3

Другой подход с использованием CSS:

input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
outline: 1px solid blue;
}

Ответ 4

Пробовали ли вы использовать события?

function selected(pDiv) {
    $("#div" + pDiv).attr("style", "border-style: solid");
    // Here write a For Loop to put "border-style: none" to everyone else
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="div1" onclick="selected(1)">1</div>
<div id="div2" onclick="selected(2)">2</div>
<div id="div3" onclick="selected(3)">3</div>

Ответ 5

все, что вам нужно использовать focus вместо hover. Селектор: селектор фокусировки используется для выбора элемента с фокусом. Это разрешено для элементов, которые принимают события клавиатуры или другие пользовательские входы.

Разница между этими двумя элементами заключается в том, что событие hover прослушивает позицию мыши относительно веб-страницы, в то время как событие focus прослушивает выбранный элемент на странице.

Итак, ваш код может выглядеть примерно так:

div {
    background: #ccc;
    margin: 20px;
}
div:focus {
    outline: 1px solid blue;
}

<div tabindex="-1">1</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>

Ответ 6

var valuesOld = new Array();
var num = 0;

function selected(pDiv) {
    num = num +1;
    valuesOld[num] = pDiv;
    console.log("Key"+num+"Value="+valuesOld[num]);

    $("#div" + pDiv).css("outline", " 1px solid rgb(133, 189, 147)");

    if(valuesOld[2] > 0 && valuesOld[1]> 0){
        $("#div" + valuesOld[num-1]).css("outline", " 1px solid rgba(133, 189, 147, 0)");
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div onclick="selected(1)" id="div1">1</div>
<div onclick="selected(2)" id="div2">2</div>
<div onclick="selected(3)" id="div3">3</div>