Простейший код в JS

293

17 июня 2017, 13:07

Есть слайдер и три кнопки. По нажатию на кнопку на всей странице меняется бэкграунд.

    #btn-1:checked ~ .container-fluid {
        background: #849D8F;
        transition: .5s;
    }

Проблема заключается в следующем. В навбаре имеется три раздела меню со своими фоном, чуть более ярким, чем бэкграунд на странице. Каким образом можно реализовать следующее действие: При клике на кнопку btn-2 - цвет бэкграунда желтый, кнопки чуть желтее, btn-3 - цвет бекграунда синий, кнопки чуть синее?

Answer 1

Извините за ядрёные цвета =)

input { 
  display: none; 
} 
label { 
  display: inline-block; 
  padding: 5px 10px; 
  margin: 3px; 
  transition: .5s; 
} 
.container-fluid { 
   transition: .5s; 
   margin-top: -34px; 
} 
#btn-1:checked ~ label { 
  background: lightgray; 
} 
#btn-1:checked ~ .container-fluid { 
   background: #849D8F; 
} 
#btn-2:checked ~ label { 
  background: red; 
} 
#btn-2:checked ~ .container-fluid { 
   background: maroon; 
} 
#btn-3:checked ~ label { 
  background: lightgreen; 
} 
#btn-3:checked ~ .container-fluid { 
   background: green 
}

<div class='nav-bar'> 
  <input type=radio id="btn-1" name="nav-bar-btn" checked /> 
  <input type=radio id="btn-2" name="nav-bar-btn"/> 
  <input type=radio id="btn-3" name="nav-bar-btn"/> 
  <label for="btn-1">#btn-1</label>  
  <label for="btn-2">#btn-2</label>  
  <label for="btn-3">#btn-3</label>  
  <div class='container-fluid'> 
    <br /><br /><br /><br /><br /><br /><br /> 
  </div>   
</div>