Изменение цвета фона div при нажатии на ссылку внутри div

#javascript #html #css

#javascript #HTML #css

Вопрос:

Итак, у меня есть эта кнопка, которая на самом деле является div, и у меня есть ссылка внутри div

 <div id='button'>
    <a href='#'>Link</a>
</div>
  

Я могу использовать CSS для изменения цвета фона при наведении курсора мыши на ссылку. Однако, как мне изменить цвет фона при нажатии на ссылку? Я полагаю, для этого требуется некоторый javascript?
Если да, ребята, можете ли вы помочь мне с Java script? Это то, что я придумал до сих пор, и все же это все еще не работает.

   <a href="/page/login" onmousedown="document.getElementById('button').backgroundColor='lavender'">login</a>
  

Ответ №1:

Вы также можете попробовать использовать :

 <div id='button'>
    <a href='#' onmousedown="this.parentNode.style.backgroundColor='lavender';">Link</a>
</div>
  

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

Ответ №2:

Я бы управлял этим с помощью JavaScript и CSS. В следующем примере цвет фона кнопки будет меняться при каждом нажатии. Это делается путем добавления класса clicked в div или удаления его, если у div уже есть этот класс.

html-код со встроенным javascript:

 <div id="button">
    <a href="#" onmousedown="javascript:(btn=document.getElementById('button')).className = (btn.className  == 'clicked') ? '' : 'clicked';">Link</a>
</div>
  

css:

 #button {
    background-color: #ccc;
}

#button.clicked {
    background-Color: #123abc;
}
  

Ответ №3:

 onmousedown="document.getElementById('button').style.backgroundColor='lavender'"