web-dev-qa-db-fra.com

Comment garder: style css actif après un clic sur un bouton

Une fois le bouton cliqué, je souhaite qu'il reste avec le style actif au lieu de revenir au style normal. Cela peut-il être fait avec CSS s'il vous plaît? J'utilise un bouton de présentation de DIVI Theme (WordPress). Aidez-moi, s'il vous plaît!

code: 

#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; }
htmlcsswordpress
24
Dereck

CSS

:active indique l'état de l'interaction (donc pour qu'un bouton soit appliqué lors de la presse), :focus peut être un meilleur choix ici. Cependant, le style sera perdu dès qu'un autre élément se concentrera.

La dernière alternative potentielle en utilisant CSS serait d'utiliser :target, en supposant que les éléments sur lesquels vous cliquez sont des routes (par exemple des ancres) dans la page - ceci peut être interrompu si vous utilisez le routage (par exemple Angular), mais cela ne semble pas être le cas .

.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

En tant que tel, il n'y a aucun moyen dans CSS de absolument basculer un état stylé - si rien de ce qui précède ne fonctionne pour vous, vous devrez soit combiner une modification de votre code HTML (par exemple basée sur une case à cocher), soit par programme. appliquer/supprimer une classe en utilisant par exemple 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

Dans le Divi Theme Documentation , il est indiqué que le thème est fourni avec un accès à 'ePanel' qui comporte également une section 'Intégration'.

Vous devriez pouvoir ajouter ce code:

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

dans la zone "Ajouter du code à la tête de votre blog" sous l'onglet "Intégration", ce qui devrait permettre à jQuery de fonctionner.

Ensuite, vous devriez pouvoir adapter votre classe à ce dont vous avez besoin. 

1
GKB

Je l'ai compris. SIMPLE, EFFICACE NO jQUERY

Nous allons utiliser une case à cocher cachée.
Cet exemple inclut un "état" survol/actif "au clic,"

-

Pour rendre le contenu lui-même cliquable:

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}



Pour que le bouton change le contenu:

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}

J'espère que ça aide!!

1
Aaron Fitch

Bien que cette question ait été posée il y a assez longtemps, je tiens à laisser ma propre réponse à mon cas, car le front-end se développe rapidement . sur le clic du bouton. J'ai 3 boutons et 2 options de sélection. Lorsque l'un des trois boutons au début est cliqué, il est actif. Mais, lorsque vous cliquez sur l'option de sélection, elle disparaît. En outre, j'avais besoin du bouton All pour être actif lorsque le modèle est monté (compilé).

 enter image description here

Voici ce que j'ai fait en utilisant les réponses ci-dessus et Internet.J'ai ajouté les classes btn--week, btn--month et btn--all respectivement.

<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>

Dans mes méthodes, option du script vuejs:

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");
      });
    }
}

et en cycle de vie monté:

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

Je sais que ce n'est pas un style de code parfait, mais cela a fonctionné pour moi. J'espère que cela aidera quelqu'un d'autre à l'avenir.

0
Nodirabegimxonoyim