Maison > interface Web > js tutoriel > le corps du texte

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

巴扎黑
Libérer: 2018-05-22 11:51:31
original
6046 Les gens l'ont consulté

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>
Copier après la connexion

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;);
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal