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

Question

[Олег Парфенюк]

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

<div class="wrapper">
  <div class="container">
    <div class="sub-container">
      <ul>
        <li><a href="#" data-color="red" class="red"></a></li>
        <li><a href="#" data-color="green" class="green"></a></li>
        <li><a href="#" data-color="blue" class="blue"></a></li>
      </ul>
    </div>
  </div>
  <div class="container">
    <div class="sub-container">
      <ul>
        <li><a href="#" data-color="red" class="red"></a></li>
        <li><a href="#" data-color="green" class="green"></a></li>
        <li><a href="#" data-color="blue" class="blue"></a></li>
      </ul>
    </div>
  </div>
  <div class="container">
    <div class="sub-container">
      <ul>
        <li><a href="#" data-color="red" class="red"></a></li>
        <li><a href="#" data-color="green" class="green"></a></li>
        <li><a href="#" data-color="blue" class="blue"></a></li>
      </ul>
    </div>
  </div>
</div>

.wrapper{
  display: flex;
  flex-direction: row;
  padding: 20px;
  background-color: black;
}

.container {
  flex: 1;
  padding: 10px;
  transition: all 2s;
}

.sub-container {
  padding: 10px;
}

.sub-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 300px;
  align-items: flex-end;
}

.sub-container ul li {
  flex: 1;
  margin: 10px;
  border: 3px solid #fff;
  padding: 10px;
  height: 60px;
}

.sub-container ul li a{
  display: block;
  width: 100%;
  height: 100%;
}

a.red {background-color: red}
a.green {background-color: green}
a.blue {background-color: blue}

Answer 1

[Stimulate]

https://jsfiddle.net/ba10hy1w/2/

Comments

[Олег Парфенюк]

спасибо, теперь понял, а то задача в учебнике есть а решить не смог)

[Олег Парфенюк]

А если допустим добавить ссылку внизу
<a href="#" class="animate-all">Animate All</a>
и при нажатии на неё поочередно все кнопки зажглись, так получится, чисто для себя интересуюсь?

[Stimulate]

Олег Парфенюк, https://jsfiddle.net/ba10hy1w/12/

[Олег Парфенюк]

а поочередно возможно?

[Stimulate]

Олег Парфенюк, https://jsfiddle.net/ba10hy1w/15/

[Олег Парфенюк]

спасибо)
понял)

Answer 2

[0xD34F]

Как поменять элементу цвет его background'а:

const setBgColor = (el, color) =>
  el.style.backgroundColor = color;
  // или
  el.style.setProperty('background-color', color);
  // или
  el.style.cssText += `background-color: ${color}`;
  // или
  el.setAttribute('style', `background-color: ${color}`);

Меняем:

document.addEventListener('click', ({ target: t }) => {
  const { color } = t.dataset;
  if (color) {
    for (; t.tagName !== 'LI'; t = t.parentNode) ;
    setBgColor(t, color);
  }
});

// или

document.querySelectorAll('[data-color]').forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  setBgColor(this.closest('li'), this.getAttribute('data-color'));
});

Comments

[Олег Парфенюк]

спасибо вам за помощь)