it-swarm.com.ru

Как сохранить: активный стиль CSS после нажатия кнопки

Как только кнопка нажата, я хочу, чтобы она оставалась с активным стилем, а не возвращалась к нормальному стилю. Можно ли это сделать с помощью CSS, пожалуйста? Я использую кнопку Blur из DIVI Theme (WordPress). Пожалуйста, помогите мне!

код: 

#blurb-hover.et_pb_blurb .et_pb_blurb_content 
.et_pb_main_blurb_image .et-pb-icon:hover {
       color: red !important; }

#blurb-hover.et_pb_blurb .et_pb_blurb_content 
.et_pb_main_blurb_image .et-pb-icon:selected {
  background-color: #ff4b46;
  color: #fff; }

#blurb-hover.et_pb_blurb .et_pb_blurb_content 
.et_pb_main_blurb_image .et-pb-icon:active {
    color: white !important;
   background-color: red; 
    width: 140px;
    height: 100px; }
24
Dereck

CSS

:active обозначает состояние взаимодействия (поэтому кнопка будет применяться во время нажатия), :focus может быть лучшим выбором здесь. Тем не менее, стиль будет потерян, как только другой элемент получит фокус.

Последней потенциальной альтернативой использования CSS будет использование :target, при условии, что при нажатии элементов устанавливаются маршруты (например, якоря) на странице - однако это может быть прервано, если вы используете маршрутизацию (например, Angular), однако здесь это не так. ,.

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}
<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>

Javascript/JQuery

Таким образом, в CSS нет никакого способа абсолютно переключить стилизованное состояние - если ничего из вышеперечисленного не работает для вас, вам нужно будет либо сочетать его с изменением вашего HTML (например, на основе флажка), либо программно применить/удалить класс, используя, например, JQuery

$('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
});
button.selected{
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Item</button><button>Item</button><button>Item</button>
  

41
SW4

В Divi Theme Documentation говорится, что тема имеет доступ к «ePanel», которая также имеет раздел «Интеграция».

Вы должны быть в состоянии добавить этот код:

<script>
 $( ".et-pb-icon" ).click(function() {
 $( this ).toggleClass( "active" );
 });
</script>

в поле с надписью «Добавить код в заголовок вашего блога» на вкладке «Интеграция», которое должно заставить работать jQuery.

Тогда вы сможете украсить свой класс тем, что вам нужно. 

1
GKB

Я ПОНЯЛ. ПРОСТО, ЭФФЕКТИВНО НЕТ JQUERY

Мы собираемся использовать скрытый флажок.
Этот пример включает одно состояние «при щелчке по щелчку мышью»

-

Чтобы сделать сам контент кликабельным:

HTML

<input type="checkbox" id="activate-div">
  <label for="activate-div">
   <div class="my-div">
      //MY DIV CONTENT
   </div>
  </label>

CSS

#activate-div{display:none}    

.my-div{background-color:#FFF} 

#activate-div:checked ~ label 
.my-div{background-color:#000}



Чтобы кнопка меняла содержимое:

HTML

<input type="checkbox" id="activate-div">
   <div class="my-div">
      //MY DIV CONTENT
   </div>

<label for="activate-div">
   //MY BUTTON STUFF
</label>

CSS

#activate-div{display:none}

.my-div{background-color:#FFF} 

#activate-div:checked + 
.my-div{background-color:#000}

Надеюсь, поможет!!

1
Aaron Fitch

Хотя этот вопрос был задан довольно давно, я хочу оставить свой собственный ответ по моему делу, потому что интерфейс быстро развивается .. Я создаю приложение в vuejs, и у меня была такая же потребность в активном классе по нажатию кнопки. У меня есть 3 кнопки и 2 варианта выбора. Когда нажата одна из трех кнопок в начале, она активна. Но когда вы нажимаете на опцию выбора, она исчезает. Также мне нужна была кнопка All, чтобы быть активным, когда шаблон смонтирован (скомпилирован).

 enter image description here

Вот что я сделал, используя ответы выше и в Интернете. Я добавил классы btn--week, btn--month и btn--all соответственно.

<div class="btn-group">
          <button
            type="button"
            class="btn btn-md light btn--week"
            v-on:change="latestType = 'week'"
          >Week</button>
          <button
            type="button"
            class="btn btn-md light btn--month"
            v-on:change="latestType = 'month'"
          >Month</button>
          <button
            type="button"
            class="btn btn-md light btn--all"
            v-on:change="latestType = ''"
          >All</button>
        </div>

В моих методах вариант vuejs script:

methods:{
 toggleButtonActiveClass() {
      // TODO: add and remove class when one is added
      $(".btn--week").click(function() {
        $(".btn--month").removeClass("active");
        $(".btn--all").removeClass("active");
        $(this).toggleClass("active");
      });
      $(".btn--month").click(function() {
        $(".btn--week").removeClass("active");
        $(".btn--all").removeClass("active");
        $(this).toggleClass("active");
      });
      $(".btn--all").click(function() {
        $(".btn--month").removeClass("active");
        $(".btn--week").removeClass("active");
        $(this).toggleClass("active");
      });
    }
}

и в смонтированном жизненном цикле:

 mounted() {
    this.toggleButtonActiveClass();
    $(".btn--all").toggleClass("active"); //to keep all button active when template created
  }

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

0
Nodirabegimxonoyim