Изменить цвет шрифта надписи при переключении проверенного состояния 1-2-3? - PullRequest
Новая
       27

Изменить цвет шрифта надписи при переключении проверенного состояния 1-2-3?

0 голосов
/ 06 мая 2019

Я получил три состояния в моем html / css, и я хочу изменить цвет шрифта «SCORE CLOCK CONFIG» на белый, когда переключатель переключается на конкретное значение (только изменение цвета выбранного состояния),Что я должен сделать для этого?Спасибо за любую помощь! 

<div class="toggle_radio">
        <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option">
        <input type="radio" checked class="toggle_option" id="second_toggle" name="toggle_option">
        <input type="radio" class="toggle_option" id="third_toggle"     name="toggle_option">
        <label for="first_toggle"><p>SCORE</p></label>
        <label for="second_toggle"><p>CLOCK</p></label>
        <label for="third_toggle"><p>CONFIG</p></label>
    <div class="toggle_option_slider">
    </div>
</div>

.toggle_radio{
  position: relative;
  border:1.5px solid #58B947;
  margin: 15px auto;
  overflow: hidden;
  padding: 0 !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
  height: 28px;
}
.toggle_radio > * {
  float: left;
}
.toggle_radio input[type=radio]{
  display: none;
}
.toggle_radio label{
  font:"Lato Light";
  color: black;
  display: block;
  width: 100px;
  height: 20px;
  margin: 3px 3px;
  cursor: pointer;
  text-align: center;
}
.toggle_option_slider{
  z-index: -1;
  width: 33%;
  height: 100%;
  position: absolute;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
}

#first_toggle:checked ~ .toggle_option_slider{
  background: #58B947;
  left: 0px;
}
#second_toggle:checked ~ .toggle_option_slider{
  background: #58B947;
  left: 108.5px;
}
#third_toggle:checked ~ .toggle_option_slider{
  background: #58B947;
  left: 218px;
}

1 Ответ

0 голосов
/ 06 мая 2019

Попробуйте использовать .on() и .css() после добавления идентификаторов или классов. 

$('#first_toggle').on("click", function() {
  $("#1").css("color", "white");
});
.toggle_radio {
  position: relative;
  border: 1.5px solid #58B947;
  margin: 15px auto;
  overflow: hidden;
  padding: 0 !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
  height: 28px;
}

.toggle_radio>* {
  float: left;
}

.toggle_radio input[type=radio] {
  display: none;
}

.toggle_radio label {
  font: "Lato Light";
  color: black;
  display: block;
  width: 100px;
  height: 20px;
  margin: 3px 3px;
  cursor: pointer;
  text-align: center;
}

.toggle_option_slider {
  z-index: -1;
  width: 33%;
  height: 100%;
  position: absolute;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
}

#first_toggle:checked~.toggle_option_slider {
  background: #58B947;
  left: 0px;
}

#second_toggle:checked~.toggle_option_slider {
  background: #58B947;
  left: 108.5px;
}

#third_toggle:checked~.toggle_option_slider {
  background: #58B947;
  left: 218px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle_radio">
  <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option">
  <input type="radio" checked class="toggle_option" id="second_toggle" name="toggle_option">
  <input type="radio" class="toggle_option" id="third_toggle" name="toggle_option">
  <label for="first_toggle"><p id="1">SCORE</p></label>
  <label for="second_toggle"><p>CLOCK</p></label>
  <label for="third_toggle"><p>CONFIG</p></label>
  <div class="toggle_option_slider">
  </div>
</div>
...