Maison  >  Article  >  interface Web  >  Comment implémenter la couleur du bouton de contrôle JS pour changer en un clic

Comment implémenter la couleur du bouton de contrôle JS pour changer en un clic

巴扎黑
巴扎黑original
2018-05-22 11:51:316040parcourir

L'éditeur suivant vous proposera une méthode simple de changement de couleur des boutons de contrôle JS en quelques clics. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

D'abord le rendu :

La valeur par défaut est ". Aujourd'hui" Il s'agit d'un état sélectionné et d'un style en ligne :

<button type="button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;">今日</button>

Les dates ci-dessus changeront de couleur uniquement lorsque vous cliquez dessus :

Cliquez sur d'autres couleurs. Changez la couleur de "Aujourd'hui" en gris

Cliquez à nouveau sur "Aujourd'hui" pour restaurer la couleur par défaut

Ajoutez un événement de clic à n'importe quelle autre date sauf "Aujourd'hui" pour obtenir [ Changer l'état de couleur par défaut de "Aujourd'hui"】

Ajouter [Restaurer la couleur d'état par défaut de "Aujourd'hui"] à l'événement de clic de "Aujourd'hui"

//昨日click
function yesterdayDate() {
  document.getElementById(&#39;title&#39;).value = getYesterdayDate(new Date());
  fetYesterdayData();
  today.css(&#39;color&#39;,&#39;#555555&#39;);
}
//今日click
function todayDate() {
  document.getElementById(&#39;title&#39;).value = formatterDateStr(new Date());
  fetTodayData();
  today.css(&#39;color&#39;,&#39;#0062cc&#39;);
}

OK, c'est fait

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn