javascript - L'attribut radio d'entrée est sélectionné par défaut. Pourquoi l'effet affiché n'est-il pas sélectionné après l'actualisation de la page ?

Question

<p class="html">
    <p class="wrap">
        <p class="full">
            <p class="content-tab-box">
                <ul class="page-box">
                    <li class="roleRight animated">
                        <p id="pageTwo" class="pageWarp">
                            <p class="pro-system num-two">
                                <!--场景图-->
                                <p class="container">
                                    <p class="tab-system-wrapper">
                                    <!--tab section 1-->
                                        <input type="radio" name="tab-radio" class="tab-radio" id="tab-system-1" checked>
                                        <label for="tab-system-1" class="tab-title tab-handler-1"><i class="iconfont icon-Workonsite work-font"></i>Work onsite</label>
                                        <p class="tab-system-content tab-content-1">这里是默认显示的内容<p>
                                     <!--tab section 2-->
                                        <input type="radio" name="tab-radio" class="tab-radio" id="tab-system-2">
                                        <label for="tab-system-2" class="tab-title tab-handler-2"><i class="iconfont icon-Workincloud work-font"></i>Work in cloud</label>
                                         <p class="tab-system-content tab-content-2">
                                              <p class="systemup animated">
                                                  <img id="combination" src="img/cloud.png" style="width: 100%;" />
                                              </p>
                                          </p>
                                    </p>
                                </p>
                            </p>
                        </p>
                    </li>
                    <li class="roleRight animated"></li>
                    <li class="roleRight animated"></li>
                    <li class="roleRight animated"></li>
                </ul>
            </p>
        </p>
    </p>
</p>

L'effet d'affichage par défaut après la saisie devrait être comme ceci :

Maintenant c'est comme ça, non sélectionné :

J'ai vérifié les attributs de l'entrée : <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked>, pourquoi après avoir actualisé N'est-ce pas ça ne s'affiche pas ? Le contenu masqué sera-t-il affiché uniquement si vous cliquez à nouveau sur l'étiquette ?

Je n’ai pas écrit de js, c’était uniquement du CSS.

Merci !

Answer 1

Merci à Djyuning :

 你说的对，是需要js控制的。
 

$(document).ready(function() {
    var checkedName = $('#tab-system-1');
    isChecked(checkedName);
}


function isChecked(name){
    var checkedTrue = name.checked ? true : false;
    if(checkedTrue == false){
        name.attr('checked','true');
    }else{
        name.attr('checked','false');
    }
}

Answer 2

Je ne comprends pas très bien votre structure HTML. À mon avis, le bouton du haut et le contenu du bas doivent être parallèles, mais le vôtre est vertical.

De plus, tant que le même nom est défini, input:radio peut automatiquement changer de sélection, et cela n'aura aucun sens pour votre script de modifier la sélection.

Obtenez le statut $(#selector)[0].checked, faites attention à [0] ici, vous devez convertir l'objet jQuery en objet Dom pour lire les propriétés !

C'est prop(name,bool), n'utilisez pas attr !

Parlons de la solution,
Tout d'abord, vous devez ajouter l'attribut vérifié à la première entrée afin qu'il soit sélectionné lors du chargement de la page.
Ensuite, vous devez utiliser js pour créer une méthode d'écoute, qui est utilisée pour parcourir tous les états d'entrée.
Ensuite, vous devez lier l'événement de changement à l'entrée et parcourir à nouveau l'état lorsque la valeur change.
Enfin, si vous souhaitez actualiser à nouveau la page après avoir cliqué tout en mettant en surbrillance l'emplacement sur lequel vous venez de cliquer, vous devrez peut-être utiliser un plug-in de cookie.
Principe : La page est chargée, initialisée et parcourue une fois, le formulaire est sélectionné, puis parcouru à nouveau.