La page php utilise JavaScript pour afficher le code caché lorsque vous cliquez sur le bouton

PHP (Hypertext Preprocessor) est un langage de programmation côté serveur adapté au développement Web dynamique. En PHP, nous pouvons utiliser JavaScript pour contrôler l’affichage des pages Web, notamment afficher et masquer les blocs de code. Dans cet article, nous verrons comment utiliser PHP et JavaScript pour afficher et masquer le code lorsque vous cliquez sur un bouton.

Étape 1 : Créer un bouton

Tout d'abord, créez un bouton dans la page où vous devez utiliser le bouton. Pour créer un bouton, ajoutez le code suivant dans votre fichier HTML :

<button id="showCode">显示代码</button>

Dans cet élément bouton, nous avons défini un ID avec le nom "showCode".

De plus, nous avons également ajouté un texte « Afficher le code » au bouton.

Étape 2 : Ajoutez le code qui doit être masqué ou affiché

Ensuite, ajoutez le code qui doit être affiché et masqué dans le code de la page.

Dans cet exemple, nous utiliserons un élément DIV et un exemple de code pour illustrer.

Dans le fichier HTML, ajoutez le code suivant :

<div id="code" style="display:none;">
    <p>这里是一些示例代码：</p>
    <ul>
        <li>代码示例1</li>
        <li>代码示例2</li>
        <li>代码示例3</li>
    </ul>
</div>

Dans cet élément DIV, nous définissons un nom avec l'ID "code". De plus, nous le définissons sur "display:none;", ce qui signifie que l'élément sera masqué pendant le chargement de la page.

Étape 3 : Ajouter un script JavaScript

Pour activer le bouton permettant de contrôler l'affichage et le masquage du code, nous devons ajouter du code JavaScript.

Dans le fichier HTML, ajoutez le code suivant :

<script>
    document.getElementById("showCode").addEventListener("click", function(){
        var code = document.getElementById("code");
        if(code.style.display === "none"){
            code.style.display = "block";
            document.getElementById("showCode").innerHTML = "隐藏代码";
        }else{
            code.style.display = "none";
            document.getElementById("showCode").innerHTML = "显示代码";
        }
    });
</script>

Ce code JavaScript définit un événement qui se produit lorsqu'un bouton est cliqué. Il recherche l'élément DIV avec l'ID "code" et vérifie s'il est masqué. S'il est actuellement masqué, il affichera l'élément code div et vice versa.

De plus, lorsque l'utilisateur clique sur le bouton, le script modifiera le texte du bouton pour refléter l'état actuel de l'élément div.

Étape 4 : Testez le bouton

Maintenant que nous avons créé le bouton, ajouté le code qui doit être affiché ou masqué et ajouté le script JavaScript, nous pouvons tester si le bouton fonctionne correctement. En cliquant sur le bouton de la page, nous devrions voir le changement d'état d'affichage ou de masquage du code.

Dans cet exemple, le bouton passera de « Afficher le code » à « Masquer le code » pour refléter son état actuel.

Résumé

Dans cet article, nous avons présenté comment utiliser PHP et JavaScript pour afficher et masquer le code lorsque vous cliquez sur un bouton. Nous pouvons contrôler l'affichage et le masquage des éléments de code en créant un bouton, en ajoutant le code qui doit être masqué ou affiché et en utilisant JavaScript pour répondre aux événements de clic. À mesure que nos pages Web deviennent plus complexes, cette technologie peut nous donner un contrôle plus flexible sur leur apparence et leurs fonctionnalités.

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!