Блог

Главная - Вопросы по программированию - Как сделать кнопку в активном состоянии по умолчанию?

Как сделать кнопку в активном состоянии по умолчанию?

#javascript #css #button

#javascript #css #кнопка

Вопрос:

У меня есть кнопка, как показано ниже, и я хочу, чтобы она находилась в режиме «наведения» и «фокусировки» по умолчанию — по умолчанию игра запускается на «easy», и поэтому я хочу, чтобы кнопка была «нажата» по умолчанию, чего я могу добиться с помощью классов — как мне это сделать?

<button id="easyBtn"">Easy</button>

С моими классами

 .buttons button {
  background-color: #03A9F4;
  border: none;
  padding: 5px 10px;
  text-transform: uppercase;
  color: white;
  font-weight: 700;
  border-radius: 3px;
}

.buttons button:hover, button:focus {
  background-color: #0074a9;
  outline: none;
}

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

1. Автофокусировка — это то, что вы ищете? <идентификатор кнопки= «easyBtn» автофокусировка>Легко</button>

2. Добавьте класс button .hover в определение наведения / фокусировки. Таким образом, вы можете добавить этот класс к кнопке, чтобы «принудительно» использовать этот стиль.

3. Это больше похоже на задание для стилизованных переключателей. Вы можете использовать свойство :checked для пользовательского стиля. Наведение и фокусировка работают как с любым другим элементом

4. @Alexander Не забудьте отметить ответ как принятый, если вы решили свою проблему, или опубликовать собственное решение в качестве ответа, чтобы помочь другим, у которых может быть такая же проблема, как у вас

Ответ №1:

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

 var currentDifficulty = 'easy';

function onDifficultyChange(e) {
    currentDifficulty = e.value;
    console.log(currentDifficulty);
}  
     [type='radio'] {
        display: none;
    }
    [type='radio'] ~ span {
        padding: 8px 16px;
        border: solid 1px royalblue;
    }
    [type='radio']:checked ~ span {
        background: royalblue;
        color: white;
    }  
 <label>
    <input
        type="radio"
        name="difficulty"
        value="easy"
        checked
        onchange="onDifficultyChange(this)"
    />
    <span>Easy</span>
</label>
<label>
    <input
        type="radio"
        name="difficulty"
        value="medium"
        onchange="onDifficultyChange(this)"
    />
    <span>Medium</span>
</label>
<label>
    <input
        type="radio"
        name="difficulty"
        value="hard"
        onchange="onDifficultyChange(this)"
    />
    <span>Hard</span>
</label>

Ответ №2:

Поскольку вы должны сохранять сложность игры в качестве переменной, вы можете запустить что-то подобное в своей функции инициализации игры:

 document.getElementById(`button-${gameDifficulty}`).focus();

Но, как кто-то упоминал в теме, кажется, что переключатели здесь должны быть более уместными.