javascript - Concernant le problème du bouton radio, je suis novice, j'espère que quelqu'un pourra m'aider.
PHP中文网
PHP中文网 2017-05-24 11:36:42
0
4
701

L'entreprise souhaite créer une page d'événement avec 4 boutons Lorsque le bouton est cliqué, cela équivaut à l'état sélectionné et l'image de fond est modifiée.

Comment restaurer le précédent à son état d'origine en cliquant sur le suivant.

PHP中文网
PHP中文网

认证高级PHP讲师

répondre à tous(4)
巴扎黑

L'image du bouton est écrite dans l'image d'arrière-plan et celle sélectionnée est ajoutée avec classe pour couvrir l'image

仅有的幸福

Cet outil d'édition, je suppose que c'est peut-être dw. . . Alors ce code révèle aussi un souffle frais.
Tout d'abord, laissez-moi vous dire qu'écrire un changement n'est pas la façon dont vous l'écrivez. Seul un petit nombre de cultivateurs de démons peuvent écrire de cette façon, et c'est informel. Nous, les pratiquants, atteignons généralement nos objectifs en modifiant les classes.
Manière d'écrire plus simple :

<p class="item">
    <img src="unchoose.png" class="unchoImg" >
    <img src="choose.png" class="choImg">
</p>

<style>
.choImg{
    display : none;
}

.choose .unchoImg{
    display : none;
}

.choose .choImg{
    display : block;
}
</style>

À l'heure actuelle, nous pouvons atteindre l'objectif correspondant en exécutant le nom de classe "choisir" via js.

黄舟

Tout d'abord, votre IMG n'a pas d'ID. Pourquoi écrivez-vous cet ID ici ? Si vous souhaitez utiliser le contrôle d'ID, ajoutez d'abord l'ID...
Ensuite, vous pouvez styliser deux boutons, un sélectionné et un non sélectionné. . Utilisez ensuite js pour contrôler le moment où l'on clique sur un bouton afin d'ajouter le style sélectionné au CSS du bouton, puis effacez les styles sélectionnés des autres boutons.

我想大声告诉你

css:

.btn {
    background-image:url(default);
}

.btn.sel {
    background-image:url(sel.png);
}

javascript:

//step1 清除所有含有sel按钮的sel样式 $('.btn.sel').removeClass('sel');
//step2 给当前触发事件的btn增加sel样式 $(this).addClass('sel')
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal