Dev Faq
0
votes

Basculer entre deux étiquettes différentes en utilisant la case à cocher

HTML 

<body class="music">
  <pre class="chord">Chords</pre>
  <div class="lyric" style="display: none">Lyrics</div>
  <input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics">
</body>

2 commentaires

Le moyen le plus simple de le faire consiste à utiliser JQuery Toggle, qui changerait la valeur CSS Affichage de l'élément sur Masquer / Afficher en fonction du courant valeur. Voici un exemple: Stackoverflow.com/a/63091686/1401808 Puis-je vous demander pourquoi avez-vous DONNÉES-ON et DONNE-OFF Attributs?

La raison de l'utilisation de data-on et data-off sont affichées ici: jsfiddle.net/5ox6ynm7

3 Réponses :

0
votes

html: xxx

css: xxx

js (en utilisant jQuery): xxx

Si vous avez des questions, demandez.

0 commentaires
0
votes

Vous devez juste basculer les affichages. J'ai remplacé la tag pré-étiquette avec un div pour l'espacement

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="music">
  <pre class="chord">Chords</pre>
  <div class="lyric" style="display: none">Lyrics</div>
  <input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics" onchange="jsdisplay()">
</body>

3 commentaires

Le problème est que je ne peux pas changer avant tag.

Alors ne le fais pas. Cela fonctionnera de toute façon. Il suffit d'ajouter de la marge: 0 si vous voulez le même placement

En fait, il s'agit d'un exemple de démonstration. Je dois écrire de longs textes à l'intérieur de la balise et préserver les espaces blancs.

1
votes

Alors, continuez le commentaire plus tôt, voici le code que vous voudrez peut-être utiliser. XXX PRE>

En tirant parti des attributs de données de votre HTML, une meilleure façon de le faire est de mettre à jour Pré Code> Contenu en fonction de la sélection de la case à cocher p>

p> 

<script 
    src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<body class="music">
  <pre class="selection">Chords</pre>
  <input
    class="c"
    id="event"
    type="checkbox"
    checked data-toggle="toggle"
    data-size="small"
    width="5px"
    data-onstyle="info"
    data-offstyle="info"
    data-on="Chords"
    data-off="Lyrics" />
</body>

0 commentaires

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier