Блог

Главная - Вопросы по программированию - Как сохранить фокус на выбранной кнопке

Как сохранить фокус на выбранной кнопке

#javascript #html #css

Вопрос:

на странице есть две кнопки, когда вы нажимаете на одну, она меняет цвет.

Как сделать так, чтобы этот фокус не исчезал после нажатия на пустое поле рядом с ним?

 <button id="button1">Text 1</button>
<button id="button2">Text 2</button>

.button1 {
height: 48px;
width: 240px;}

.button1:hover {
background-color: red;}

.button1:focus {
background-color: green;}

.button2 {
height: 48px;
width: 240px;}

.button2:hover {
background-color: red;}

.button2:focus {
background-color: green;}

Ответ №1:

Вы можете сделать это с помощью HTML и CSS, только оформив метки радиовходов в соответствии со следующим предложением.

Преимущество этой реализации заключается в том, что вам не нужно поддерживать другой элемент (с помощью javascript), если вам нужно, чтобы значение кнопки было отправлено через форму.

 span {
    display: inline-block;
    position: relative;
}

span > input[type=radio] {
    visibility: hidden;
    position: absolute;
}

span > label {
    padding: 5px 10px;
    border: solid 1px #ccc;
    cursor: pointer;
}

span > label:hover {
    background-color: #fcfcfc;
}

span > input[type=radio]:checked   label {
    background-color: green;
    color: white;
} 
 <span>
    <input name="my-button" value="1" type="radio" id="my-button-1" />
    <label for="my-button-1">Text 1</label>
</span>
<span>
    <input name="my-button" value="2" type="radio" id="my-button-2" />
    <label for="my-button-2">Text 2</label>
</span>

Комментарии:

1. Это действительно чистый подход. Согласен!

Ответ №2:

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

 let btns = document.querySelectorAll('button');

btns.forEach((btn)=> {
    btn.addEventListener('click', function() {
        if(document.querySelector('button.active')){
         document.querySelector('button.active').classList.remove('active');
        }
        btn.classList.add('active');
    });
}); 
 #button1 {
height: 48px;
width: 240px;}

#button1:hover {
background-color: red;}

#button1:focus, #button1.active {
background-color: green;}

#button2 {
height: 48px;
width: 240px;}

#button2:hover {
background-color: red;}

#button2:focus, #button2.active {
background-color: green;} 
 <button id="button1">Text 1</button>
<button id="button2">Text 2</button>

Комментарии:

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

2. Таким образом, каждый раз, когда нажимается новая кнопка, другая кнопка восстанавливается?

3. «Значит, каждый раз, когда нажимается новая кнопка, другая кнопка восстанавливается?» Да

4. В javascript нет необходимости, но это действительно зависит от желания каждого реализовать его. Я добавил ответ, в котором вы можете реализовать его без какого-либо javascript, но только HTML и CSS

Метки: